使用React Native调试器查看网络流量

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时）？ / p>

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

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

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

Answer 2

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