react-native 在设备上运行时如何调试?

IT技术 reactjs react-native react-native-android
2021-05-08 08:07:37

react-native 在设备上运行时如何调试?

4个回答

为 Android 设计了我们的 React Native 调试。解决这个问题的人的步骤 -

  1. 启动您的 RN 应用程序
  2. 震动装置
  3. 选择“开发设置”
  4. 选择“Debug server host & port for device”输入系统的IP地址。
  5. 震动装置
  6. 选择“远程调试JS”
  7. Chrome 将打开一个地址为“ http://localhost:8081/debugger-ui的新标签页
  8. 如果没有发生这种情况,请检查您的端口并打开一个新选项卡并输入带有您的端口号的上述地址。
  9. 打开 #Chrome DevTools(#MacOSX 上的 Cmd+Alt+I)
  10. 选择控制台选项卡
  11. 震动装置
  12. 选择“重新加载”

查看所有控制台日志或使用“调试器”;在您的 JS 中进行断点调试。

您有两个选择:

  1. 远程调试

iOS:Cmd + ctrl + z 打开菜单并选择“远程调试”

Android:Cmd + M 打开菜单并选择“远程调试”

  1. 或运行以下命令之一:

    react-native log-ios
    react-native log-android
    

对于 IOS,这里几乎没有什么 hack。在 XCode 中,从项目文件夹中打开 AppDelegate.m,用 jsCodeLocation 声明注释该行并在其附近添加如下内容:

jsCodeLocation = [NSURL URLWithString:@"http://%YOUR_PC_IP%:8081/index.ios.bundle?platform=ios&dev=true"];

,其中 %YOUR_PC_IP% 是您的开发机器在本地网络上的 IP。

然后打开位于 Libraries 文件夹中的名为 RCTWebSocket 的项目,然后从此项目文件 RCTWebSocketProjectExecutor.m 打开。接下来,用主机声明注释该行,然后在它附近添加如下内容:

host = @"%YOUR_PC_IP%";

快完成了。使用 XCode 在您的设备上运行应用程序,并确保您的 iPhone 可以通过互联网看到您的开发机器。

启动后,确保节点服务器正在运行(在根项目文件夹中使用命令“react-native -- --start”)并通过 chrome 打开此页面:http://localhost:8081/debugger-ui另外,必须在 iPhone 上的应用程序中启用选项 Debug JS Remotely。(摇动动作,然后点击打开的菜单“远程调试 JS”,就是这样。)

现在打开开发控制台并进行愉快的调试。

存在2 个选项:

远程调试:这将通过网络进行,因此可能会滞后。

  1. 在设备上运行应用程序(在插入时安装它)
  2. 摇晃设备(安卓设备需要大力摇晃
  3. settingsdev 菜单,然后在 下DebuggingDebug server host and port for device
  4. 输入您的调试服务器的 IP 地址和端口(通常为 8081,除非您更改了调试服务器的设置),例如 255.255.255.255:8081。您的 IP 地址是您的计算机拥有的本地 IP 地址。确保设备在同一网络上。对于Mac用户,打开System Preferences→交通Network→交通Wifi→交通下Status: connected,有一个IP地址,使用它。
  5. 你可以拔掉设备
  6. 确保调试模式打开(再次用力摇晃设备,按调试)

有线调试:对于慢速连接相对更好

  1. 在手机上安装应用
  2. 如果是 android,请设置端口转发,adb reverse tcp:8081 tcp:8081如果是 iOS,请按照RN docs 中的步骤操作
  3. 在设备上启用调试