Question

我想在React Native中查看我的网络请求，以帮助我调试 - 最好是在网络＆＃39; Chrome浏览器的开发工具选项卡。

在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的解决方案只有在开发工具处于打开状态并因此提供XMLHttpRequest时才有效。

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

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

Answer 2

我在我的应用中使用以下内容（在主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 3

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

请注意此代码。

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

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

将它用于常规呼叫，但不能用于多部分/表格数据呼叫

Answer 8

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

看看这些屏幕截图。

Answer 9

如果您希望在应用的发行版上调试网络请求，则可以使用库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 />;

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

Answer 10

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

http://charlesproxy.com

Answer 11

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

npx react-native start

然后打开Android Studio。

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

点击蓝色图标Android Profiler

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

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

请检查此内容以获取有关inspecting network traffic的更多信息。

Answer 12

在我回答的时候，react native 检查器有这个网络部分，你可以看到所有的请求，但我建议使用其他 react native 调试器客户端，因为用这个客户端调试请求不是很好一个小小的手机屏幕。（您可以通过摇晃手机或按 Shift + d 或 Ctrl + m，然后按“切换检查器”或“显示检查器”来打开检查器。

react native inspector with opened network tab

Answer 13

你们有没有试过 react-native 自带的 react-native 调试器？您可以通过按 ctrl + M 启用此功能，然后您可以选择打开的 show inspector / toggle inspector

Answer 14

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

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

14 个答案: