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

Question

我想在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一起使用，以及解释这样做涉及的安全问题吗？

Answer 1

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

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

XMLHttpRequest = _XHR

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

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

说明：

GLOBAL.originalXMLHttpRequest指的是XHR的Chrome Dev Tools副本。它由RN提供作为逃生舱口。 Shvetusya的解决方案只有在dev工具打开并因此提供XMLHttpRequest时才有效。

编辑：在调试器模式下，您将需要允许跨源请求。使用chrome你可以使用this handy plugin。

编辑：Read about the RN github issue引导我到这个解决方案

Answer 2

在js中添加调试器，您可以在其中查看请求或响应

Answer 3

我在我的应用程序中使用以下内容（在主app.js入口点文件中添加此项）：

// To see all the requests in the chrome Dev tools in the network tab.
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
    GLOBAL.originalXMLHttpRequest :
    GLOBAL.XMLHttpRequest;

  // fetch logger
global._fetch = fetch;
global.fetch = function (uri, options, ...args) {
  return global._fetch(uri, options, ...args).then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  });
};

最好的是它还会在控制台中显示获取日志，这些日志格式正确。

截图：

在网络选项卡上：

Answer 4

我使用Reactotron来跟踪网络请求。

Answer 5

我知道这是一个老问题，但现在有一个更安全的方法，不需要禁用CORS或改变React Native源代码。您可以使用名为Reactotron的第三方库，它不仅可以跟踪API调用（使用网络插件），还可以跟踪您的Redux存储和Sagas以及其他设置：

https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md

Answer 6

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

看看这些截图。

Answer 7

通过删除React Native在导入React Native后提供的polyfill，我能够在Chrome中调试我的请求。

var React = require('react-native');
delete GLOBAL.XMLHttpRequest;

这适用于我同样的原始请求。不确定是否需要在Chrome中禁用CORS以使其适用于跨源。

Answer 8

在过去，我使用GLOBAL.XMLHttpRequest hack来跟踪我的API请求，但有时它非常慢并且不适用于资产请求。我决定使用Postman’s proxy功能来检查从手机发出的HTTP通信。有关详细信息，请查看official documentation，但基本上，有三个简单的步骤：

• 在Postman中设置代理
• 检查计算机的IP地址（$ ifconfig）
• 在wifi设置中在移动设备上配置HTTP代理

Answer 9

请小心这段代码。

XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
   GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

它有帮助，它很棒，但它会破坏上传。我花了两天时间试图弄清楚为什么上传文件正在发送[object Object]而不是真实文件。原因是上面的代码。

使用它进行常规调用，但不能用于多部分/表单数据调用

Answer 10

我建议使用Charles检查您的网络请求。这真的很好，提供更多的可见性，并允许您做高级的东西。

http://charlesproxy.com