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

我想在React Native中查看我的网络请求，以帮助我进行调试——最好是在Chrome开发工具的“网络”选项卡中

GitHub（和）上有一些关于这方面的封闭问题，但我并不完全理解它们。听起来我需要撤销React Native的一些多边形填充，然后运行一些带有额外调试标志的命令，也许还需要修改一些Chrome安全设置？显然，这样做涉及到一些安全问题，这可能会使它成为一个糟糕的想法，但是没有人在线程中明确说明它们是什么

---

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

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

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

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

---

这对我的同源请求有效。不确定您是否需要在Chrome中禁用CORS以使其能够用于跨源。

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

---

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

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

XMLHttpRequest = _XHR

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

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

说明：

GLOBAL.originalXMLHttpRequest

指的是Chrome开发工具XHR的副本。它由RN提供，作为逃生舱口。Shvetusya的解决方案只有在开发工具是开放的并且因此提供了

XMLHttpRequest

的情况下才能工作

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

---

编辑：这将引导我找到此解决方案

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

最好的是，它还显示了控制台中格式良好的获取日志

截图：

在“网络”选项卡上：

---

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

---

过去，我使用

GLOBAL.XMLHttpRequest

hack跟踪API请求，但有时速度非常慢，对资产请求不起作用。我决定使用

邮递员代理

功能来检查从手机发出的HTTP通信。有关详细信息，请查看，但基本上有三个简单的步骤：

• 在Postman中设置代理
• 检查计算机的IP地址（

  $ifconfig

  ）
• 在wifi设置中在移动设备上配置HTTP代理

---

请小心使用此代码

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

这很有帮助，很好，但会破坏上传。我花了两天时间试图弄清楚为什么上传的文件发送的是[object object]，而不是真实的文件。原因是上面的代码
将其用于常规调用，而不是用于多部分/表单数据调用
我用于跟踪网络请求

---

我不知道为什么到目前为止还没有人指出这个解决方案。使用React本机调试器-！在我看来，它是React Native最好的调试工具，它提供了开箱即用的网络检查功能
看看这些截图
右键单击并选择“启用网络检查”
右键单击并选择“启用网络检查”
调试完毕

---

如果您有android手机或模拟器

• npx反应本机启动

然后打开门
将项目的

android

文件夹作为android Studio项目打开
单击它所在的蓝色图标
Android Profiler启动后，您可以通过

会话

标签附近的灰色加号图标添加应用程序
现在，您可以通过此工具检查网络。您可以看到显示网络活动的三角形

---

有关的详细信息，请查看此项。
如果您希望在应用程序的发布版本上调试网络请求，您可以使用该库。它允许您从自定义调试屏幕监视和查看应用程序内的网络请求
然后，您可以将其置于构建标志或网络标志之后，以便在生产应用程序中为用户禁用它
只需使用

warn add react native network logger安装它

，然后将其添加到应用程序的入口点：

从'react native network logger'导入{startNetworkLogging}；
startNetworkLogging（）；
AppRegistry.registerComponent（'App'，（）=>App）；

在调试屏幕上显示：

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

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

从'react native network logger'导入网络记录器；
constmyscreen=（）=>；

---

免责声明：我是软件包的作者。
你们有没有试用过react本机自带的react本机调试器？您可以通过按ctrl+M来启用此功能，然后可以选择打开的

显示检查器

/

切换检查器

---

在我回答时，react-native inspector有一个网络部分，您可以查看所有请求，但我建议使用其他react-native debugger客户端，因为使用这个客户端在一个很小的电话屏幕上调试请求不是很好。 （您可以通过摇动手机或按

Shift+d

或

Ctrl+m

，然后按“切换检查器”或“显示检查器”来打开检查器

---

在React本机应用程序发出的请求上下文中，什么是“同一来源”请求？与调试器位于同一域（即可能是本地主机）的应用程序？在我的情况下，您必须在Chrome中禁用CORS，以使其适用于跨ori

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

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