1. 调试

React Native调试技巧与心得

打开 http://localhost:8081/debugger-ui 开始调试

1.1. 真机调试

1.1.1. Android

默认加载 js 包的地址是 localhost:8081，真机和电脑不是一个 IP，所以需要处理后才能用，参考 (Android 5.0 及以上)使用 adb reverse 命令

 adb -s <device id> reverse tcp:8081 tcp:8081

1.1.2. iOS

iOS 编译的时候会生成包含本地 IP 的 'ip.txt' 文件，文件会拷贝到 ipa 包中，RCTBundleURLProvider:guessPackagerHost 方法会从该文件读取 IP 地址。

1.1.3. Questions

内网不通的情况，可以开启 Mac 的互联网共享。具体做法如下：

Mac 端：设置 > 共享 > 互联网共享 > 来源选 Wifi，端口选 iPhone USB
iPhone 端：USB 连接 Mac > 关闭 WIFI > 关闭蜂窝网络 > 完成

1.2. 工具

1.3. 打印日志

1.3.1. iOS

Debug 环境只打印在浏览器 console，Release 环境可以打印到 Xcode Console

1.3.2. Android

可以直接在 Android Studio 的 logcat 查看

1.4. React Native 远程调试实现原理

1.4.1. RN

$ npm star
node node_modules/react-native/local-cli/cli.js start

react-native/local-cli/server/runServer.js 启动 WebSocket 服务

react-native/local-cli/server/util/debugger-ui/index.html connectToDebuggerProxy 创建调试 WebSocket 服务

const ws = new WebSocket('ws://' + window.location.host + '/debugger-proxy?role=debugger&name=Chrome');

RN rxjs/src/observable/dom/WebSocketSubject.ts 启动 ws://localhost:8081 websocket 服务

RCTWebSocketExecutor

1.4.2. iOS

连接

DevSupport 模块 RCTInspectorDevServerHelper 的 + (void)connectForContext:withBundleURL 方法

http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false

Inspector 模块 RCTInspectorPackagerConnection 的 - (void)connect 方法，创建 RCTSRWebSocket 连接

ws://127.0.0.1:9101/devtools/page/4

RCTWebSocketExecutor setUp http://localhost:8081/debugger-proxy?role=client

/launch-js-devtools -- http://localhost:8081/debugger-proxy?role=client

RCT_ENABLE_INSPECTOR

1.5. Questions

1.5.1. 1

react-native debug 的时候 chrome 报 No 'Access-Control-Allow-Origin' header is present on the requested resource 错。

参考 https://stackoverflow.com/questions/48445514/react-native-js-debugger-issues-with-cors-ios

解决方法一：安装 Allow CORS: Access-Control-Allow-Origin 插件

调试