how to monitor image requests for a react-native app to verify if images are loaded from cache or not (using Charles)

Question

I am trying to monitor the requests for images to verify whether the images are loaded from the ios/android cache or they are still being requested from the backend firebase storage. I am using React Native Debugger by enabling Network Inspect but can't seem to observe the requests for images (URIs) of react-native "image" components. How can I monitor the requests for images or how can I check whether the images are loaded from the cache or not?

Thanks!

Answer 1

According to the React Native Debugger documentation here: https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md

It can't inspect request like Images loaded from urls for src, so if your Image source has a set session, the session can't apply to fetch and XMLHttpRequest.

The same document refers to Charles & stetho for monitoring these kinds of requests.

If you want to inspect deeper network requests (like requests made with Image), use tools like Charles or Stetho.

I installed Charles on my mac, installed the certificate on my iOS device, and enabled it using the information contained on the below links. Now I am able to monitor the requests for images.

1- https://www.charlesproxy.com/documentation/getting-started/

2- https://www.donnywals.com/debugging-network-traffic-with-charles/

3- https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

4- https://stackoverflow.com/a/49129286/1680793

(You may need to visit other linked pages on the links I listed above as needed)

Install Charles on you Mac, launch this help action as described in the documentation I listed:

Charles will guide you about how to install and trust the required certificate on your device:

Some important points:

• When you install Charles on your Mac/PC, if it asks for making the required configurations automatically, allow it.
• To install the certificate on your ios device browse to chls.pro/ssl URL using the SAFARI browser, not Chrome. Then follow the instructions your device displays to install the certificate. (I was especially interested in monitoring my iOS device since android seems to cache the images by default)
• If you are using firebase storage as your image store (as I do) and can't see the requests/responses being recorded by Charles, lookout for a message like this: SSL Proxying not enabled for this host. Enable in the Proxy Menu, SSL Proxying Settings

You need to enable SSL proxying for https://firebasestorage.googleapis.com. Add firebasestorage to SSL proxying configuration like so (or whatever URL you are interested in monitoring the communication with):

• Charles will be recording everything going on with your mac, to observe just the "firestore" requests from your app for your images, use the "filter" box at the bottom of the structure tree on the left pane (see the first image above).
• Don't forget to disable your WIFI proxy after you are done with Charles or you will not be able to connect to the internet.
• Make sure you follow the documentation carefully and pay attention to my list here.
• Charles is a paid tool. You can use the trial version for 30 days. And each launch will terminate itself after 30 mins, so you will need to restart Charles.