如何查看 React Native.com 中的网络请求(用于调试) ？

我想查看我的网络请求反应原生，以帮助我调试-理想情况下，在“网络”标签的 Chrome 的 devtools。

在 GitHub (https://github.com/facebook/react-native/issues/4122和 https://github.com/facebook/react-native/issues/934)上有一些关于这个的封闭问题，但是我不完全理解它们。听起来好像我需要撤销一些反应本机的填充，然后运行一些带有额外调试标志的命令，也许还需要修改一些 Chrome 安全设置？显然，这样做涉及到一些安全问题，这可能使它成为一个可怕的想法，但是没有人参与到这个线程中来，明确地说明它们是什么。

能否有人提供一个逐步指导，让网络选项卡与反应本机工作，以及解释这样做所涉及的安全问题？

166750 次浏览
小开

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

小开

我能够在 Chrome 中调试我的请求通过删除填充反应原生提供后导入反应原生。

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

对于同样的原产地请求，这对我很有用。不确定你是否需要在 Chrome 中禁用 CORS 来使其工作于交叉起源。

小开

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

Http://charlesproxy.com

小开

这就是我在应用程序的入口点所使用的

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


XMLHttpRequest = _XHR

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

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

说明:

GLOBAL.originalXMLHttpRequest引用了 XHR 的 Chrome 开发工具副本。它是由注册护士提供作为逃生舱口。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;
});
};

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

截图:

enter image description here

在网络选项卡上:

enter image description here

小开

我知道这是一个老问题，但是现在有一个更安全的方法可以做到这一点，不需要禁用 CORS 或者修改反应本机源代码。您可以使用名为 Reactotron 的第三方库，它不仅可以跟踪 API 调用(使用网络插件) ，还可以跟踪您的 Redux 存储，以及附加设置的 Sagas:

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

小开

在过去，我使用 GLOBAL.XMLHttpRequest黑客跟踪我的 API 请求，但有时它是非常缓慢，不工作的资产请求。我决定使用 Postman’s proxy特性来检查从电话传出的 HTTP 通信。详情请看 正式文件，但基本上有三个简单的步骤:

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

请小心使用这个代码。

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

它很有用，但是会破坏上传。我花了两天的时间试图弄清楚为什么上传的文件发送的是[对象对象]而不是真正的文件。原因是上面的密码。

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

小开

我使用 反应堆跟踪网络请求。

enter image description here

小开

我不知道为什么到目前为止还没有人指出这个解决方案。使用 React 本机调试器 -https://github.com/jhen0409/react-native-debugger！它是最好的调试工具反应本机在我看来，它给网络检查开箱即用。

看看这些截图。

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

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

开始调试！ Network Inspect in action

小开

如果你有一个安卓手机或模拟器,

  • npx react-native start

然后打开 安卓工作室。

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

enter image description here

点击那个蓝色的图标，它是 Android Profiler 安卓分析器

安卓分析器启动后，您可以添加您的应用程序通过灰色加上图标附近的 SESSIONS标签 enter image description here

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

请检查这个关于 检查网络流量的更多信息。

小开

如果你正在调试你的应用程序的发布版本的网络请求，你可以使用库 本机网络日志记录程序。它允许您在自定义调试屏幕上监视和查看应用程序中的网络请求。

所有请求的列表 只有一个请求
react-native-network-logger list react-native-network-logger details

然后，您可以将其置于构建标志或网络标志之后，以便在生产应用程序中为用户禁用它。

只要安装它与 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 />;

免责声明: 我是包作者。

小开

你们有没有试过自带的反应本机调试器？您可以通过按 ctrl + M来启用它，然后您可以选择打开的 show inspector/toggle inspector

ios emulator android emulator

小开

在我回答问题的时候，响应本机检查器有一个网络部分，你可以看到所有的请求，但是我建议使用其他响应本机调试器客户端，因为这个客户端不太适合在小小的手机屏幕上调试请求。 (你可以摇晃你的手机或者按 Shift + d或者 Ctrl + m，然后按“切换检查员”或者“显示检查员”来打开检查员。

使用打开的网络选项卡对本地检查器做出反应

小开

现在，Flipper 就是我们的目标。
Https://fbflipper.com/

官方声明:
Https://reactnative.dev/blog/2020/03/26/version-0.62

小开
  1. 打开 Android Studio →应用程序检查→选择连接到的进程→网络检查器
  2. 使用应用程序并执行一些请求
  3. 点击网络检查器可视化
  4. 观察带有请求和响应的连接视图和概述的新面板。

enter image description here

GL


提交答案