如何在 React Native 中查看网络请求（用于调试）？

javascript google-chrome-devtools react-native

2022-08-30 01:59:30

我想在 React Native 中查看我的网络请求，以帮助我进行调试 - 最好是在 Chrome 的 devtools 的“网络”标签中。

GitHub上有一些关于这个问题的封闭问题（https://github.com/facebook/react-native/issues/4122 和 https://github.com/facebook/react-native/issues/934），但我并不完全理解它们。听起来我需要撤消一些 React Native 的 polyfill，然后运行一些带有额外调试标志的命令，也许还要修改一些 Chrome 安全设置？显然，这样做涉及一些安全问题，可能会使它成为一个可怕的想法，但是参与线程的人都没有明确说明它们是什么。

有人可以提供一个分步指南，让网络选项卡与 React Native 一起工作，以及这样做所涉及的安全问题的解释吗？

答案 1

我不确定为什么到目前为止还没有人指出这个解决方案。使用 React Native Debugger - https://github.com/jhen0409/react-native-debugger！在我看来，它是 React Native 最好的调试工具，它提供了开箱即用的网络检查。

看看这些截图。

右键单击并选择“启用网络检查”

调试离开！

答案 2

这是我在应用程序的入口点中使用的内容

const _XHR = GLOBAL.originalXMLHttpRequest ?  
    GLOBAL.originalXMLHttpRequest :           
    GLOBAL.XMLHttpRequest                     

XMLHttpRequest = _XHR

编辑：frevib链接到下面更简洁的语法。谢谢弗雷维！

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

解释：

GLOBAL.originalXMLHttpRequest引用 XHR 的 Chrome Dev Tools 副本。它由RN提供作为逃生舱口。Shvetusya的解决方案只有在开发工具是开放的，因此提供.XMLHttpRequest

编辑：在调试器模式下，您需要允许跨源请求。使用chrome，您可以使用这个方便的插件。

编辑：阅读有关导致我找到此解决方案的RN github问题的信息