View network traffic using react native debugger

Question

I'm developing a React Native app using create-react-native-app (so, Expo), testing on a real device using my network IP address (192.xxx.xxx.xxx). I've managed to get react-native-debugger up and running and debugging remotely. It opens rn-debugger, redux devtools and chrome devtools in 3 separate windows.

My question is, is it possible to see an equivelant of the network tab from Chrome developer tools to show all the network traffic going in and out of the app (e.g. when my app makes calls to an API using Axios)?

The actual network tab in the Chrome dev tools window is presumably just showing the network traffic between the debugger and the app running on the local device, so it's just showing the websocket stuff that the debugger uses, not my App's network traffic.

To get round this, I could just do loads of logging to the console when making requests but as a web developer I'm used to being able to see all the headers, json and timings etc in a handy view.

Answer 1

OK, I found the answer in the RND documentation here so I'm going to answer my own question.

https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md

There's lots of code on there, but I realised that you don't have to do anything except right click in the debugger and click "Enable Network Inspect", as detailed on this page:

https://github.com/jhen0409/react-native-debugger/blob/master/docs/shortcut-references.md