如何在React Native中查看网络请求（用于调试）？ [英] How can I view network requests (for debugging) in React Native?

问题描述

我想在React Native中查看我的网络请求以帮助我调试 - 最好是在Chrome的devtools的网络标签中。

I'd like to view my network requests in React Native to help me debug - ideally in the 'Network' tab of Chrome's devtools.

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

There are some closed issues about this on GitHub (https://github.com/facebook/react-native/issues/4122 and 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.

有人可以提供吗？使网络选项卡与React Native一起使用的分步指南，以及这样做涉及的安全问题的解释？

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?

推荐答案

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

This is what I've been using in the entry point of my app

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

XMLHttpRequest = _XHR

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

frevib linked to more concise syntax below. Thanks frevib!

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

说明：

GLOBAL.originalXMLHttpRequest 是指XHR的Chrome Dev Tools副本。它由RN提供作为逃生舱口。 Shvetusya的解决方案只有在dev工具打开时才能工作，因此提供 XMLHttpRequest 。

GLOBAL.originalXMLHttpRequest refers 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.

编辑：你需要在调试器模式下允许跨源请求。使用chrome，您可以使用这个方便的插件。

You will need to allow cross origin requests when in debugger mode. With chrome you can use this handy plugin.

编辑：了解RN github问题引导我找到这个解决方案

Read about the RN github issue that lead me to this solution

这篇关于如何在React Native中查看网络请求（用于调试）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！