Debugging Network Calls in React Native Using the Chrome Debugger
TL;DR! Just give me the code
index.js file (or your platform-specific index file for that matter), simply add the following line to the top, directly after the
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ? GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;
then, as usually, start remote debugging from your app, and open:
http://localhost:8081/debugger-ui on your computer.
That’s it. Please, make sure to never rely completely on the network infrastructure of the Chrome debugger. Many networking problems may be specific to your device/simulator, and will not be caught by the debugger.
OK, now the longer explanation
One of the big advantages of React Native is the ease of debugging your code. When running an app in development mode, one can debug it remotely, using the well familiar Chrome DevTools. Logging to the console and setting breakpoints in the code work just as if the app were running in a normal browser’s window.
To fully explain why this is so is out of the scope of this post. There is a great Medium article that explains in detail how the “magic” behind the RN remote debugging works. I totally recommend you read, regardless of your experience with React and RN.
All the native calls run on the device itself, and executing a network call makes no difference. As such, it is not an easy task to make network traces appear in the Inspector window. At least, not without overriding the default platform APIs (for each of the supported platforms) and communicate every state change with the browser. I am sure that the core dev team is working on a solution, and will deliver it in a future release.
Until then, you can test network calls by replacing the default implementation of
XMLHttpRequest and use the one provided by the browser. As you saw in the beginning, it turns out that this is surprisingly simple. Once you do it, override the browser’s default CORS rules, and reload the app, you should start seeing network requests in the Chrome Inspector. As I already pointed out, though, the Chrome Inspector can be helpful inasmuch as the requests and responses are concerned. It won’t help you prevent issues with the native network infrastructure of your emulator/device. To inspect those, you will rather have to use a proxy, such as Charles, or jump into tracing the native log files.