使用本机调试器查看网络流量

jon*_*bbs 3 react-native expo react-devtools 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。

我的问题是,是否可以从 Chrome 开发人员工具中看到网络选项卡的等效项,以显示进出应用程序的所有网络流量(例如,当我的应用程序使用 Axios 调用 API 时)?

Chrome 开发工具窗口中的实际网络选项卡大概只是显示调试器和本地设备上运行的应用程序之间的网络流量,所以它只显示调试器使用的 websocket 内容,而不是我的应用程序的网络流量。

为了解决这个问题,我可以在发出请求时对控制台进行大量日志记录,但作为 Web 开发人员,我习惯于能够在一个方便的视图中查看所有标头、json 和计时等。

jon*_*bbs 7

好的,我在 RND 文档中找到了答案,所以我要回答我自己的问题。

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

那里有很多代码,但我意识到除了在调试器中右键单击并单击“启用网络检查”外,您无需执行任何操作,如本页所述:

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