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

Question

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

Answer 1

您有两种选择：

1. 远程调试

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

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

1. 或者运行以下命令之一：

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

Answer 2

IOS几乎没有黑客入侵。 在XCode中打开项目文件夹中的AppDelegate.m，用jsCodeLocation声明注释该行并在其附近添加如下内容：

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

，其中％YOUR_PC_IP％是本地网络上您的开发机器的IP。

然后打开名为RCTWebSocket的项目，该项目位于Libraries文件夹中，然后从该项目文件RCTWebSocketProjectExecutor.m打开。接下来，使用主机声明注释该行，然后在其附近添加类似的内容：

host = @"%YOUR_PC_IP%";

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

启动后确保节点服务器正在运行（命令＆＃34; react-native - --start＆＃34;在根项目文件夹中）并通过chrome打开此页面：http://localhost:8081/debugger-ui。另外，必须在iPhone上的应用程序中启用Debug JS Remotely选项。 （摇动动作，然后点击打开的菜单Debug JS Remotely，就是它。）

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

Answer 3

想出了我们针对Android的React Native调试。苦苦挣扎的人的步骤-

1. 启动您的RN应用
2. 摇动设备
3. 选择“开发设置”
4. 选择“调试设备的服务器主机和端口”输入系统的IP地址。
5. 摇动设备
6. 选择“远程调试JS”
7. Chrome将打开一个新标签页，其地址为“ http://localhost:8081/debugger-ui”
8. 如果没有发生，请检查您的端口并打开一个新标签，然后输入上面的地址以及您的端口号。
9. 打开#Chrome DevTools（在#MacOSX上为Cmd + Alt + I）
10. 选择控制台标签
11. 摇动设备
12. 选择“重新加载”

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

Answer 4

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

在我的this answer中详细阅读所有步骤。

Answer 5

存在

2 选项：

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

1. 在设备上运行应用（在插入状态下安装）
2. 摇动设备（需要剧烈摇动）
3. 在开发菜单上按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. 确保打开调试模式（再次剧烈摇晃设备，然后按Debug）

有线调试：连接速度较慢时相对更好

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