使用React Native Debugger查看网络流量

Question

我正在使用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和时间等信息。

- jonhobbs

Answer 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

- jonhobbs

Answer 2

好的，让我向您推荐Reactotron这个有用的工具，它可以用于检查React Native应用程序的网络流量或事件。

- julian salas

---

我刚刚在阅读关于这个的内容，因为我的下一步是尝试为redux-saga设置一些日志记录。 - jonhobbs