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

Posted 2023-02-19

【中文标题】如何在 React Native 中查看网络请求（用于调试）？

【英文标题】：How can I view network requests (for debugging) in React Native?

【发布时间】：2016-03-04 00:29:27

【问题描述】：

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

在 GitHub（https://github.com/facebook/react-native/issues/4122 和 https://github.com/facebook/react-native/issues/934）上有一些关于此的已解决问题，但我并不完全理解它们。听起来我需要撤消一些 React Native 的 polyfill，然后运行一些带有额外调试标志的命令，也许还需要修改一些 Chrome 安全设置？显然，这样做涉及一些安全问题，这可能使其成为一个糟糕的想法，但没有人参与线程明确说明它们是什么。

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

【参考方案1】：

我不确定为什么到目前为止还没有人指出这个解决方案。使用 React Native 调试器 - https://github.com/jhen0409/react-native-debugger!在我看来，它是 React Native 最好的调试工具，它提供了开箱即用的网络检查。

看看这些截图。

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

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

调试吧！

【讨论】：

如果您正在浏览并看到此答案，请注意您必须右键单击并Enable Network Inspect 才能工作。默认情况下不会。

哇，为什么右键单击主面板会隐藏此功能。从来不知道它的存在。游戏规则改变者。 Json 响应没有出现......在切换时立即出现。谢谢！

为什么不广为人知？ ?‍♂️

更像是为什么当我们访问“网络”选项卡或在该选项卡内标记为设置（复选框或某些类型）时，这不是默认行为！

您可以通过设置配置文件将其设为默认值：github.com/jhen0409/react-native-debugger/blob/master/docs/…

【参考方案2】：

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

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，您可以使用 this handy plugin。

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

【讨论】：

在我输入那段代码后，我可以在开发者控制台中看到请求，但我的所有请求都以 404 状态失败。有人知道为什么会发生这种情况吗？

这行得通。来自Github

这对我不起作用。我用的是安卓模拟器，网络标签显示为空，甚至正在发送请求

这不再起作用，控制台中出现以下错误（不确定是什么变化导致的）：Uncaught Error: unsupported BodyInit type at Response.Body._initBody (fetch.js:231) at new Response (fetch.js:390) at XMLHttpRequest.xhr.onload (fetch.js:437)

使用这种单线设置在React Native Debugger 上工作。感谢一百万次，@tryangul

【参考方案3】：

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

最好的是它还在控制台中显示了格式正确的提取日志。

截图：

在网络标签上：

【讨论】：

太棒了！谢谢

这是在原始请求的哪一点触发的？如果响应有 401，我实际上正在考虑将其用作触发刷新令牌的机制。这有问题吗？

神奇的桑卡尔普！在不让我的 Metro builder 崩溃的情况下，我很难让 Reacotron 正常工作。您的解决方案效果很好。甚至可以在 React Native Debugger 中使用。

当请求的凭证模式为“包含”时，响应中的“Access-Control-Allow-Origin”标头的值不能是通配符“*”。因此，不允许访问 Origin 'localhost:8081'。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

太棒了。非常感谢

【参考方案4】：

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

【讨论】：

这实际上是这里所有答案中最好的解决方案（对我来说）.. 超级容易设置并且没有使用 chrome 的所有副作用

你担心使用chrome的副作用是什么？ Reactotron 使用 Chromium 嵌入式框架。

太棒了！！谢谢你为我节省了在网上搜索的时间

我的已连接到设备但没有捕获每个请求，仅在第一次加载时。这是为什么呢？

由于react-native-reanimated-2 在调试模式下不起作用，这是唯一允许我查看网络请求的解决方案。

【参考方案5】：

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

List of all requests	Single request 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 />;

免责声明：我是包作者。

【讨论】：

伙计，这个库太棒了！谢谢

这太棒了。每当应用程序发送请求时，我都希望这些信息在 json 中。我找到了 getRequests 方法，它返回 json 中的所有请求，但是每当应用程序发送请求时我怎么能得到？

【参考方案6】：

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

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

【讨论】：

Reactotron 似乎只有在您使用名为 apisauce 的外部库时才有效。它不适用于正常获取。所以如果你想在你的应用中监控外部库发送的请求，reactotron 是不行的。

@VilleMiekk-oja 实际上 reactotron 自 3 月以来就支持使用 Fetch 联网，只是文档已过时。我自己尝试过，并在自述文件中更正了它:)

这很好用；我已经看到了很多问题：GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

reactotron 非常易于配置，并且对于跟踪 react-native 应用程序的网络调用非常有用

【参考方案7】：

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

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

这对我来说适用于同源请求。不确定是否需要在 Chrome 中禁用 CORS 以使其适用于跨源。

【讨论】：

在 React Native 应用程序发出的请求的上下文中，什么是“同源”请求？与调试器位于同一域的一个（即可能是本地主机）？

就我而言，您必须在 Chrome 中禁用 CORS 才能使其适用于跨源。检查这个 chrome 插件：chrome.google.com/webstore/detail/allow-control-allow-origi/…

@MouhamedHalloul 你能解释一下你是如何使用这个插件的吗？

【参考方案8】：

请注意这段代码。

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

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

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

【讨论】：

Dawid 我遇到了一个重大问题，试图弄清楚为什么我的图像从 react native 上传产生的 [object Object]。差点放弃了。我在尝试在另一个应用程序的调试器中获取网络活动时遇到了这个评论。我还没有测试你所说的，但我还是谢谢你。这是我获得的关于为什么我的上传被破坏的第一个体面的线索。

【参考方案9】：

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

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

【参考方案10】：

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

npx react-native start

然后打开android Studio。

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

点击蓝色图标Android Profiler

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

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

有关inspecting network traffic的更多信息，请查看此处。

【参考方案11】：

我建议使用 Charles 来检查您的网络请求。 它真的很棒，提供了更多的可见性，让你可以做一些高级的事情。

http://charlesproxy.com

【讨论】：

刚试过查尔斯，它似乎只捕获http://localhost:8081/index.android.bundle?platform=android&dev=true ..如何让它捕获所有请求？ （我正在打一个外部 api）

您的外部 API 是否使用 HTTPS？如果是这样，您还需要对 Charles 进行一些配置以捕获它们。

在使用 android 时，charles 在捕获传出请求时可能会有点问题。您需要“手动”配置您的模拟器以访问 charles（上次我尝试过，进入配置面板不会完成这项工作——代理 ip 需要从命令行实例化传入）。

【参考方案12】：

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

react native inspector with opened network tab

【参考方案13】：

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

【讨论】：

至少在我写这个问题的时候，那只是一个元素检查器，不支持查看网络请求。那改变了吗？这个答案没有说。

【参考方案14】：

在js中添加Debugger，可以看到req或者response

【讨论】：

大声笑为什么这个答案被否决了这么多。在我知道存在任何开发工具之前，我曾经这样做过。将 console.log 放在响应上，console.error 放在 catch 块上，console.time 估计请求时间，然后就可以了