reactnative远程调试

reactnative远程调试
 最后更新于 2024年10月02日 07:52:48

前情概要

线上环境遇到了意外bug,生产日志上报中定位不到实际问题点时,需要特殊机型或其它设备调试。

因为 React Native 支持 Debug JS Remotely,那么就可以利用 app-debug.apk 测试包远程调试。 我们常见的 debug 包和 release 包最大的区别是:

  • release 已经打包好了所有 js 文件到 assets 目录中
  • debug 包是通过请求开发服务器加载项目中的 js 文件

实现步骤

获取 debug 包

android/app/build/outputs/apk/app-debug.apk 目录中获取安装包

设置node服务

调试设备运行 debug 包后,在 Dev Settings 中设置 Debug server host & port for device。地址修改为 node服务IP地址,端口 8081

注意: 若是开发服务器和调试设备不在 同一局域网 内,则需要将 node服务远程调试设备 通过 VPN 连接到同一局域网内。

开启 debug 模式

在调试菜单中,选择 Debug JS Remotely

问题

  1. node服务 与 调试设备不在同一局域网内,调试设备尝试连接服务时,会出现如下错误信息
Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:8082/create_session'
Realm failed to connect to the embedded debug server inside the app.
If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.
  1. 需要通过 VPN 连接 node服务调试设备时。在步骤二 设置node服务 中,调试设备设置的 IP地址 需要修改为 VPN 分配的地址