使用React Native调试器查看网络流量 [英] View network traffic using react native debugger
问题描述
我正在使用create-react-native-app(因此称为Expo)开发React Native应用，并使用我的网络IP地址(192.xxx.xxx.xxx)在真实设备上进行测试.我设法远程启动react-native-debugger并运行和调试.它将在3个单独的窗口中打开rn-debugger，redux devtools和chrome devtools.
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.
我的问题是，是否有可能从Chrome开发人员工具中看到等价的网络标签，以显示进出该应用程序的所有网络流量(例如，当我的应用程序使用Axios调用API时)?
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)?
Chrome开发者工具窗口中的实际网络选项卡大概只是显示调试器和在本地设备上运行的应用之间的网络流量，因此它只是显示调试器使用的websocket内容，而不是我的应用的网络流量.
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.
要解决这个问题，我可以在发出请求时将大量日志记录到控制台，但是作为一名Web开发人员，我习惯于在方便的视图中查看所有标头，json和时间等.
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.
推荐答案
好的，我在这里的RND文档中找到了答案，所以我将回答自己的问题.
OK, I found the answer in the RND documentation here so I'm going to answer my own question.
上面有很多代码，但是我意识到除了在调试器中右键单击并单击启用网络检查"外，您无需执行任何操作，如本页中所述:
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
这篇关于使用React Native调试器查看网络流量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
