How can I view network requests (for debugging) in React Native?

Question

I\'d like to view my network requests in React Native to help me debug - ideally in the \'Network\' tab of Chrome\'s devtools.

There are some closed issues about thi

Answer 1

I was able to debug my requests in Chrome by deleting polyfill that React Native provides after importing React Native.

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

This worked for me for same origin requests. Not sure if you need to disable CORS in Chrome to make it work for cross origin.

Answer 2

In the past I used GLOBAL.XMLHttpRequest hack to track my API requests but sometimes it is very slow and didn't work for assets requests. I decided to use Postman’s proxy feature to inspect HTTP communication going out from phone. For details look at the official documentation, but basically, there are three easy steps:

• Set up the proxy in Postman
• Check your computer’s IP address($ ifconfig)
• Configure HTTP proxy on your mobile device in wifi settings

Answer 3

If you are looking to debug network requests on a release version of your app you can use the library react-native-network-logger. It lets you monitor and view network requests within the app from a custom debug screen.

You can then put this behind a build flag or a network flag to disable it for users in the production app.

Just install it with yarn add react-native-network-logger then add this at the entry point of your app:

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

And this on a debug screen:

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

Disclaimer: I'm the package author.

Answer 4

I'm not sure why no one has pointed out this solution so far. Use React Native Debugger - https://github.com/jhen0409/react-native-debugger! It is the best debugging tool for React Native in my opinion and it gives Network Inspection out of the box.

Take a look at these screenshots.

Right click and select 'Enable Network Inspect'

Right click and select 'Enable Network Inspect'

Debug away!

Answer 5

Add Debugger in the js where you can see the req or response

Answer 6

Please be careful with this code.

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

It helps and it's great but it destroys upload. I spend 2 days trying to figure out why uploaded files are sending [object Object] instead of the real file. The reason is a code above.

Use it for regular calls not but for multipart/form-data calls