如何在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的解决方案只有在开发工具开放并因此提供时才有效XMLHttpRequest.

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

编辑:阅读导致我解决此问题的RN github问题

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

我使用Reactron跟踪网络请求.

Answer 4

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

看一下这些屏幕截图。

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

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

调试一下！

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

请小心使用此代码。

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

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

将它用于常规调用，而不是用于多部分/表单数据调用

Answer 7

如果您想在应用程序的发布版本上调试网络请求，您可以使用库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 8

如果你有安卓手机或者模拟器

• npx react-native start

然后打开Android Studio。

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

单击蓝色图标，它是Android Profiler

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

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

请检查此内容以获取有关检查网络流量的更多信息。

Answer 9

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

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

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

Answer 10

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

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

Answer 11

这些天，Flipper 就是这样的举动。
https://fbflipper.com/

官方公告：
https ://reactnative.dev/blog/2020/03/26/version-0.62

Answer 12

在js中添加调试器，您可以在其中看到req或response