【React Native】使用Chrome调试

1,926 阅读1分钟

RN使用Chrome调试

背景

使用react_native_debugger调试工具经常崩溃,其他调试工具也不是很好用。Chrome适合调试,但存在两个问题:

  1. 浏览器跨域问题

  2. network不展示接口请求response

如图所示:

6.png

2.png

解决方案

跨域:
  1. 浏览器的 xx.xx.xx.xx:8081/debugger-ui… 改为localhost模式 http://localhost:8081/debugger-ui/

  2. Chrome浏览器下载跨域扩展,比如CORS Unblock,添加扩展后点亮开启使用即可,使用方式参考:add0n.com/access-cont…

5.png

如果还是出现Network面板的response数据无法查看:

尝试在App.js(或index.android.js/index.ios.js)文件添加如下代码:

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;

效果

4.png

success.png

建议

调试过程中如果出现warning Remote debugger is in a background tab which may cause apps to perform slowly.

可尝试在新的窗口打开调试tab,速度快一些。