Javascript 如何在 React Native 中查看网络请求（用于调试）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33997443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I view network requests (for debugging) in React Native?
提问by Mark Amery
I'd like to view my network requests in React Native to help me debug - ideally in the 'Network' tab of Chrome's devtools.
我想在 React Native 中查看我的网络请求以帮助我调试 - 最好在 Chrome 开发工具的“网络”选项卡中。
There are some closed issues about this on GitHub (https://github.com/facebook/react-native/issues/4122and https://github.com/facebook/react-native/issues/934) but I don't entirely understand them. It sounds like I need to undo some of React Native's polyfills and then run some commands with extra debugging flags, and maybe modify some Chrome security settings? And apparently there are some security issues involved in doing this that might make it a terrible idea, but nobody involved in the thread has explicitly stated what they are.
在 GitHub（https://github.com/facebook/react-native/issues/4122和https://github.com/facebook/react-native/issues/934）上有一些关于此的已解决问题，但我不完全理解他们。听起来我需要撤消一些 React Native 的 polyfill，然后运行一些带有额外调试标志的命令，也许还需要修改一些 Chrome 安全设置？显然，这样做会涉及一些安全问题，这可能会使它成为一个糟糕的主意，但该线程中涉及的任何人都没有明确说明它们是什么。
Could somebody provide a step-by-step guide to getting the Network tab working with React Native, as well as an explanation of the security issues involved in doing so?
有人可以提供一个分步指南，让网络选项卡与 React Native 一起工作，以及这样做所涉及的安全问题的解释吗？
回答by tryangul
This is what I've been using in the entry point of my app
这是我在我的应用程序的入口点中一直使用的
const _XHR = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest :
GLOBAL.XMLHttpRequest
XMLHttpRequest = _XHR
EDIT: frevib linked to more concise syntax below. Thanks frevib!
编辑： frevib 链接到下面更简洁的语法。谢谢弗雷维！
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
Explanation:
解释：
GLOBAL.originalXMLHttpRequestrefers the the Chrome Dev Tools copy of XHR. It is provided by RN as an escape hatch. Shvetusya's solution will only work if the dev tools are open and thus providing XMLHttpRequest.
GLOBAL.originalXMLHttpRequest指的是 XHR 的 Chrome Dev Tools 副本。它由 RN 作为逃生舱口提供。Shvetusya 的解决方案只有在开发工具打开并因此提供XMLHttpRequest.
EDIT: You will need to allow cross origin requests when in debugger mode. With chrome you can use this handy plugin.
编辑：在调试器模式下，您需要允许跨源请求。使用 chrome，您可以使用这个方便的插件。
EDIT: Read about the RN github issuethat lead me to this solution
编辑：阅读有关使我找到此解决方案的 RN github 问题
回答by Kashish Grover
I'm not sure why no one has pointed out this solution so far. Use React Native Debugger - https://github.com/jhen0409/react-native-debugger! It is the best debugging tool for React Native in my opinion and it gives Network Inspection out of the box.
我不确定为什么到目前为止没有人指出这个解决方案。使用 React Native Debugger - https://github.com/jhen0409/react-native-debugger！在我看来，它是 React Native 最好的调试工具，它提供了开箱即用的网络检查。
Take a look at these screenshots.
看看这些截图。
Right click and select 'Enable Network Inspect'
右键单击并选择“启用网络检查”
Right click and select 'Enable Network Inspect'
右键单击并选择“启用网络检查”
Debug away!
调试离开！
回答by Sankalp Singha
I use the following in my app ( Add this in your main app.js entry point file ) :
我在我的应用程序中使用以下内容（在您的主 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;
});
};
The best thing is that it also shows the fetch logs in the console as well which are well formatted.
最好的事情是它还在控制台中显示了格式良好的获取日志。
Screenshot:
截屏：
On the network tab:
在网络选项卡上：
回答by Aung Myat Hein
回答by T Stone
I know this is an old question, but there's a much safer way to do this now that does not require disabling CORS or altering the React Native source code. You can use a third party library called Reactotron that not only tracks API calls (using the network plugin), but also can track your Redux store, and Sagas with additional setup:
我知道这是一个老问题，但现在有一种更安全的方法来做到这一点，不需要禁用 CORS 或更改 React Native 源代码。您可以使用名为 Reactotron 的第三方库，它不仅可以跟踪 API 调用（使用网络插件），还可以跟踪您的 Redux 商店和带有额外设置的 Sagas：
https://github.com/infinitered/reactotronhttps://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md
https://github.com/infinitered/reactotron https://github.com/infinitered/reactotron/blob/master/docs/plugin-networking.md
回答by lanan
I was able to debug my requests in Chrome by deleting polyfill that React Native provides after importing React Native.
通过删除导入 React Native 后 React Native 提供的 polyfill，我能够在 Chrome 中调试我的请求。
var React = require('react-native');
delete GLOBAL.XMLHttpRequest;
This worked for me for same origin requests. Not sure if you need to disable CORS in Chrome to make it work for cross origin.
这对我的同源请求有用。不确定是否需要在 Chrome 中禁用 CORS 以使其适用于跨域。
回答by mradziwon
In the past I used GLOBAL.XMLHttpRequesthack to track my API requests but sometimes it is very slow and didn't work for assets requests. I decided to use Postman's proxyfeature to inspect HTTP communication going out from phone. For details look at the official documentation, but basically, there are three easy steps:
在过去，我使用GLOBAL.XMLHttpRequesthack 来跟踪我的 API 请求，但有时它非常慢并且不适用于资产请求。我决定使用Postman's proxy功能来检查从手机发出的 HTTP 通信。详情查看官方文档，但基本上，有三个简单的步骤：
- Set up the proxy in Postman
- Check your computer's IP address(
$ ifconfig) - Configure HTTP proxy on your mobile device in wifi settings
- 在 Postman 中设置代理
- 检查您电脑的IP地址(
$ ifconfig) - 在您的移动设备上的 wifi 设置中配置 HTTP 代理
回答by Dawid Dereszewski
Please be careful with this code.
请小心使用此代码。
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;
It helps and it's great but it destroys upload. I spend 2 days trying to figure out why uploaded files are sending [object Object] instead of the real file. The reason is a code above.
它有帮助，而且很棒，但会破坏上传。我花了 2 天时间试图弄清楚为什么上传的文件发送的是 [object Object] 而不是真实文件。原因是上面的代码。
Use it for regular calls not but for multipart/form-data calls
将它用于常规调用，而不是用于多部分/表单数据调用
回答by Ran Yefet
I suggest using Charles to inspect your network requests. It's really good and provide more visibility and allows you to do advanced stuff.
我建议使用 Charles 来检查您的网络请求。它真的很好，提供了更多的可见性，并允许您执行高级操作。
回答by Muhammed Ozdogan
If you have an android phone or emulator,
如果你有安卓手机或模拟器，
npx react-native start
npx react-native start
Then open the Android Studio.
然后打开Android Studio。
Open the androidfolder of your project as a Android Studio Project.
android将项目文件夹作为 Android Studio 项目打开。
Click that blue icon which it is Android Profiler
单击它是Android Profiler 的蓝色图标
After the Android Profiler start, you can add your app via grey plus icon near the SESSIONSlabel
Android Profiler 启动后，您可以通过SESSIONS标签
附近的灰色加号图标添加您的应用
Now you can inspect networking via this tool. You can see triangles that shows your network activity.
现在您可以通过此工具检查网络。您可以看到显示网络活动的三角形。
Please check this for more info about inspecting network traffic.
请检查此有关检查网络流量的更多信息。
