当它在设备上运行时，你如何调试 react-native？

Question

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

Answer 1

为 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 中进行断点调试。

Answer 2

您有两个选择：

1. 远程调试

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

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

2. 或运行以下命令之一：

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

Answer 3

对于 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”，就是这样。）

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

Answer 4

存在2 个选项：

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

1. 在设备上运行应用程序（在插入时安装它）
2. 摇晃设备（安卓设备需要大力摇晃）
3. 按 dev 菜单上的settings ，然后在Debugging下，按Debug 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. 在设备上启用调试

Answer 5

如果您正在使用Visual Studio Code，那么您可以安装React Native Tools扩展（由Microsoft提供）并像任何其他 IDE 一样调试您的应用程序。

在我的这个答案中详细阅读所有步骤。