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

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

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

有人可以提供逐步指南以使“网络”选项卡与React Native一起使用，以及对这样做所涉及的安全性问题的解释吗？

我不确定为什么到目前为止没有人指出这种解决方案。使用React Native Debugger- https://github.com/jhen0409/react-native-debugger！我认为这是React Native的最佳调试工具，并且开箱即可进行网络检查。

看一下这些屏幕截图。

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

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

调试一下！

这就是我在应用程序入口处一直使用的

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

XMLHttpRequest = _XHR

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

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

说明：

GLOBAL.originalXMLHttpRequest是指XHR的Chrome开发工具副本。由RN提供，作为逃生舱口。Shvetusya的解决方案仅在开发工具处于打开状态并因此提供XMLHttpRequest。

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

编辑：了解导致我到此解决方案的RN github问题

我在我的应用程序中使用以下内容（将其添加到您的主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;
  });
};

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

屏幕截图：

在网络标签上：

我使用Reactotron跟踪网络请求。

我知道这是一个老问题，但是现在有一种更安全的方法来执行此操作，不需要禁用CORS或更改React Native源代码。您可以使用名为Reactotron的第三方库，该库不仅可以跟踪API调用（使用网络插件），还可以通过其他设置跟踪您的Redux商店和Sagas：

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

导入React Native之后，我可以通过删除React Native提供的polyfill来调试Chrome中的请求。

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

这对我来说适用于相同来源的请求。不知道是否需要在Chrome中禁用CORS才能使其适用于跨源。

过去，我使用GLOBAL.XMLHttpRequest骇客来追踪我的API请求，但有时速度非常慢，无法用于资产请求。我决定使用Postman’s proxy功能来检查从电话发出的HTTP通信。有关详细信息，请参阅官方文档，但是基本上可以通过三个简单步骤：

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

请谨慎使用此代码。

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

它很有帮助，效果很好，但会破坏上传。我花了2天的时间来弄清楚为什么上传的文件发送的是[object Object]而不是实际文件。原因是上面的代码。

不能将其用于常规调用，而可以用于多部分/表单数据调用

我建议使用Charles检查您的网络请求。它非常好，可以提供更多的可见性，并允许您执行高级操作。

http://charlesproxy.com

如果您希望在应用的发行版上调试网络请求，则可以使用库react-native-network-logger。它使您可以从自定义调试屏幕监视和查看应用程序内的网络请求。

然后，您可以将其置于生成标记或网络标记的后面，以在生产应用程序中为用户禁用它。

只需使用进行安装，yarn add react-native-network-logger然后将其添加到您应用的入口即可：

import { startNetworkLogging } from 'react-native-network-logger';

startNetworkLogging();
AppRegistry.registerComponent('App', () => App);

这在调试屏幕上：

import NetworkLogger from 'react-native-network-logger';

const MyScreen = () => <NetworkLogger />;

免责声明：我是程序包的作者。

如果您有Android手机或模拟器，

• npx react-native start

然后打开Android Studio。

android将项目的文件夹作为Android Studio项目打开。

单击蓝色图标，它是Android Profiler

Android Profiler启动后，您可以通过SESSIONS标签 旁边的灰色加号图标添加应用

现在，您可以通过此工具检查网络。您可以看到显示网络活动的三角形。

请检查有关检查网络流量的更多信息。

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