默认加载 js 包的地址是 localhost:8081
,真机和电脑不是一个 IP,所以需要处理后才能用,参考 (Android 5.0 及以上)使用 adb reverse 命令
adb -s <device id> reverse tcp:8081 tcp:8081
iOS 编译的时候会生成包含本地 IP 的 'ip.txt' 文件,文件会拷贝到 ipa 包中,RCTBundleURLProvider:guessPackagerHost
方法会从该文件读取 IP 地址。
内网不通的情况,可以开启 Mac 的互联网共享。具体做法如下:
- Mac 端:设置 > 共享 > 互联网共享 > 来源选 Wifi,端口选 iPhone USB
- iPhone 端:USB 连接 Mac > 关闭 WIFI > 关闭蜂窝网络 > 完成
Debug 环境只打印在浏览器 console,Release 环境可以打印到 Xcode Console
可以直接在 Android Studio 的 logcat 查看
$ 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
连接
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
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 插件