使用 React Native Debugger 查看网络流量

Question

我正在使用 create-react-native-app（所以，Expo）开发 React Native 应用程序，使用我的网络 IP 地址（192.xxx.xxx.xxx）在真实设备上进行测试。我已经成功地 react-native-debugger 和 运行 以及远程调试。它在 3 个单独的 windows.

中打开 rn-debugger、redux devtools 和 chrome devtools

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

Chrome 开发工具 window 中的实际网络选项卡可能只是显示调试器和本地设备上的应用程序 运行 之间的网络流量，所以它只是显示调试器使用的 websocket 东西，而不是我应用程序的网络流量。

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

Answer 1

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

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

那里有很多代码，但我意识到除了在调试器中右键单击并单击 "Enable Network Inspect" 之外，您无需执行任何操作，如本页所述：

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

Answer 2

好吧，我建议你 reactotron 是一个有用的工具，可以检查网络流量或来自 React Native 应用程序的事件。