使用 react native 调试器查看网络流量

Posted 2023-02-19

【中文标题】使用 react native 调试器查看网络流量

【英文标题】：View network traffic using react native debugger

【发布时间】：2019-02-12 22:48:14

【问题描述】：

我正在使用 create-react-native-app (so, 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 和时间等。

【参考方案1】：

好的，我在这里的 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

【参考方案2】：

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

【讨论】：

我刚刚读到这个，因为我的下一步是尝试为 redux-saga 进行一些日志记录