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

Question

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!

This is what I've been using in the entry point of my app

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

EDIT: frevib linked to more concise syntax below. Thanks frevib!

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Explanation:

GLOBAL.originalXMLHttpRequest refers the Chrome Dev Tools copy of XHR. It is provided by RN as an escape hatch. Shvetusya's solution will only work if the dev tools are open and thus providing XMLHttpRequest.

EDIT: You will need to allow cross origin requests when in debugger mode. With chrome you can use this handy plugin.

EDIT: Read about the RN github issue that lead me to this solution

I use the following in my app ( Add this in your main app.js entry point file ) :

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

The best thing is that it also shows the fetch logs in the console as well which are well formatted.

Screenshot:

On the network tab:

I use Reactotron for tracking network request.

I know this is an old question, but there's a much safer way to do this now that does not require disabling CORS or altering the React Native source code. You can use a third party library called Reactotron that not only tracks API calls (using the network plugin), but also can track your Redux store, and Sagas with additional setup:

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

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.

List of all requests	Single request details

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.

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.