当React Native在设备上运行时，您如何进行调试？

Question

当React Native在设备上运行时，您如何进行调试？

- Mohit Bajoria

---

摇晃设备，然后在弹出窗口中选择“远程调试”。这将在系统上打开一个Chrome窗口。然后就像调试任何JavaScript应用程序一样进行调试即可。 - Panther

嘿！谢谢。已经生效了。 - Mohit Bajoria

https://facebook.github.io/react-native/docs/debugging.html - imjared

Answer 1

解决React Native在安卓设备上的调试问题。以下是针对此情况的步骤：

1. 启动你的RN应用
2. 摇晃设备
3. 选择“开发设置”
4. 选择“设备的调试服务器主机和端口”，输入你系统的IP地址
5. 再次摇晃设备
6. 选择“远程调试JS代码”
7. Chrome会打开一个新标签页，网址为 "http://localhost:8081/debugger-ui"
8. 如果这没有发生，请检查你的端口，并打开一个新标签页，输入以上网址和你的端口号
9. 打开#Chrome开发者工具（在#MacOSX上使用Cmd+Alt+I）
10. 选择控制台选项卡
11. 再次摇晃设备
12. 选择“重新加载”

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

- Darshan Pania

---

系统的IP地址是什么？它是公共IP吗？ - Ben Butterworth

是的，它是公共IP。 - Darshan Pania

Answer 2

你有两个选项：

1. 远程调试

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

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

2. Or run one of these commands:

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

- Morten Stulen

Answer 3

2个选项可用:

远程调试: 这将通过网络进行，因此可能会有延迟。

1. 在设备上运行应用程序（插入时安装）
2. 摇晃设备（Android 设备需要大力摇动）
3. 在开发菜单上按 设置，在 调试 下按 为设备调试服务器主机和端口
4. 输入您的调试服务器的 IP 地址和端口（通常为 8081，除非您更改了调试服务器的设置），例如 255.255.255.255:8081。您的 IP 地址是计算机本地 IP 地址。确保设备在同一网络上。对于 Mac 用户，请打开 系统偏好设置 → 网络 → Wifi → 在 状态: 已连接 下，有一个 IP 地址，使用它。
5. 您可以拔掉设备
6. 确保调试模式已开启（再次大力摇动设备，按调试）

有线调试：对于慢速连接而言相对更好

1. 在手机上安装应用程序
2. 如果是安卓系统，请使用 adb reverse tcp:8081 tcp:8081 进行端口转发；如果是iOS系统，请按照 RN文档 中的步骤进行操作
3. 启用设备调试模式

- Ben Butterworth

Answer 4

这里有一些关于IOS的小技巧。 在XCode中打开项目文件夹中的AppDelegate.m文件，将声明jsCodeLocation的行注释掉，并在其附近添加类似以下内容的代码：

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

在本地网络中，%YOUR_PC_IP% 是您的开发机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选项（摇动操作，然后在打开的菜单中点击Debug JS Remotely即可）。

现在打开开发控制台并享受调试吧。

- Alex Belets

---

哦，我刚刚使用了localtunnel来暴露我的开发服务器。这样我就可以无线开发了 :) - Ulises Giacoman

当然可以使用本地隧道端点而不是本地IP。 - Alex Belets

只需要覆盖jsCodeLocation即可。 - Computer's Guy

Answer 5

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

请在我的此答案中详细阅读所有步骤。

- gprathour