How to profile network on React-Native?

Question

I am searching that for a day but can't get proper solution.

I have to know how to profile network requests on my react-native app.

I am uploading data to the API and two servers and want to know what is the size of uploaded data. How can I track that.

I tried Android Studio Network Profiler but I think it misses some request parts and there is an IOS side of application. Any advice?

Thanks in advance

Answer 1

In order to view network requests on iOS, you'll need to do a couple things.

First, you'll need to enable Web Inspector on your iOS device. On iOS go to Settings > Safari > Advanced. In there you can enable "Web Inspector".

Second, open Safari and make sure you can select the "Develop" menu item in the top menu bar. If not you'll have to enable developer settings in the Safari preferences by going to Preferences.. > Advanced and there should be a checkbox near the bottom that will enable Develop menu in menu bar.

Finally, plug in your iOS device to your computer via USB with the React Native application running and open Safari. Open the Develop menu and you should see your iOS device listed as one of the 3rd or 4th items down. Select your iOS device from the menu and a sub menu should pop up with a list of "Inspectable elements". Your React Native app should be listed there and this will open Safari's developer tools.

From here you should be able to select the network tab and be able to profile the network for your React Native app on iOS.

As for Android, someone else will have to answer that. Good luck!