我想在 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 一起工作，并解释这样做所涉及的安全问题吗？
【问题讨论】：
标签： javascript google-chrome-devtools react-native
我不确定为什么到目前为止还没有人指出这个解决方案。使用 React Native 调试器 - https://github.com/jhen0409/react-native-debugger!在我看来，它是 React Native 最好的调试工具，它提供了开箱即用的网络检查。
看看这些截图。
【讨论】：
Enable Network Inspect 才能工作。默认情况下不会。
这是我一直在我的应用程序入口点使用的内容
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 引导我找到这个解决方案
【讨论】：
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)
我在我的应用程序中使用以下内容（将其添加到您的主 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;
});
};
最好的是它还在控制台中显示了格式正确的提取日志。
截图：
在网络标签上：
【讨论】：
我使用Reactotron 来跟踪网络请求。
【讨论】：
react-native-reanimated-2 在调试模式下不起作用，这是唯一允许我查看网络请求的解决方案。
如果您希望在应用的发布版本上调试网络请求，您可以使用库 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 />;
免责声明：我是包作者。
【讨论】：
我知道这是一个老问题，但现在有一种更安全的方法可以做到这一点，不需要禁用 CORS 或更改 React Native 源代码。您可以使用名为 Reactotron 的第三方库，它不仅可以跟踪 API 调用（使用网络插件），还可以跟踪您的 Redux 存储和 Sagas，并进行额外设置：
https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md
【讨论】：
我可以通过在导入 React Native 后删除 React Native 提供的 polyfill 在 Chrome 中调试我的请求。
var React = require('react-native');
delete GLOBAL.XMLHttpRequest;
这对我来说适用于同源请求。不确定是否需要在 Chrome 中禁用 CORS 以使其适用于跨源。
【讨论】：
请注意这段代码。
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;
它有帮助而且很棒，但它会破坏上传。我花了 2 天时间试图弄清楚为什么上传的文件发送的是 [object Object] 而不是真实文件。原因是上面的代码。
将它用于常规调用，而不是用于多部分/表单数据调用
【讨论】：
过去我使用GLOBAL.XMLHttpRequest hack 来跟踪我的 API 请求，但有时它非常慢并且不适用于资产请求。我决定使用Postman’s proxy 功能来检查从手机发出的 HTTP 通信。详情请看official documentation，但基本上，只需三个简单的步骤：
$ ifconfig)【讨论】：
如果你有安卓手机或模拟器，
npx react-native start然后打开Android Studio。
将项目的android 文件夹作为 Android Studio 项目打开。
点击蓝色图标Android Profiler
Android Profiler 启动后，您可以通过SESSIONS 标签附近的灰色加号图标添加您的应用
现在您可以通过此工具检查网络。您可以看到显示您的网络活动的三角形。
有关inspecting network traffic的更多信息，请查看此处。
【讨论】：
我建议使用 Charles 来检查您的网络请求。 它真的很棒，提供了更多的可见性，让你可以做一些高级的事情。
【讨论】：
http://localhost:8081/index.android.bundle?platform=android&dev=true ..如何让它捕获所有请求？ （我正在打一个外部 api）
在我回答的时候，react native 检查器有这个网络部分，你可以看到所有的请求，但我建议使用其他 react native 调试器客户端，因为用这个来调试请求并不好一个小小的手机屏幕。
（您可以通过摇动手机或按Shift + d 或Ctrl + m，然后按“Toggle Inspector”或“Show Inspector”来打开检查器。
【讨论】：
在js中添加Debugger，可以看到req或者response
【讨论】：