当设备上的 运行 时如何调试 react-native？
How do you debug react-native when it is running on device?
当设备上 运行 时如何调试 react-native？
您有两个选择：
- 远程调试
iOS: Cmd + ctrl + z 打开菜单 select "Debug remotely"
Android: Cmd + M 打开菜单 select "Debug remotely"
或运行这些命令之一：
react-native log-ios
react-native log-android
IOS 这里有一些技巧。
在 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 上的应用程序中启用“远程调试 JS”选项。 （摇动动作，然后在打开的菜单中点击远程调试JS，就是这样。）
现在打开开发控制台，调试愉快。
为 Android 计算我们的 React Native 调试。为为此苦苦挣扎的人的步骤 -
- 启动您的 RN 应用程序
- 摇一摇装置
- Select "Dev Settings"
- Select "Debug server host & port for device" 输入您系统的 IP 地址。
- 摇一摇装置
- Select "Debug JS remotely"
- Chrome 将打开地址为“http://localhost:8081/debugger-ui”的新标签
- 如果没有发生这种情况，请检查您的端口并打开一个新选项卡并输入上述地址和您的端口号。
- 打开#Chrome DevTools（#MacOSX 上的 Cmd+Alt+I）
- Select 控制台选项卡
- 摇一摇设备
- Select "Reload"
查看所有控制台日志或在 JS 中使用 "debugger;" 进行断点调试。
如果您正在使用 Visual Studio 代码，那么您可以安装 React Native Tools 扩展（由 Microsoft 提供）并调试您的应用程序，例如任何其他 IDE.
详细阅读我的 中的所有步骤。
2 选项存在：
远程调试：这将通过网络进行，因此可能会很慢。
- 运行 设备上的应用程序（插入时安装）
- 摇晃设备（Android 设备需要剧烈摇晃）
- 在开发菜单上按
settings，然后在Debugging下按Debug server host and port for device
- 输入调试服务器的 IP 地址和端口（通常为 8081，除非您更改了调试服务器的设置），例如255.255.255.255:8081。您的 ip 地址是您的计算机拥有的本地 IP 地址。确保设备在同一网络上。 mac用户，打开
System Preferences→Network→Wifi→Status: connected下有一个IP地址，使用那个。
- 您可以拔下设备
- 确保调试模式已打开（再次用力摇晃设备，按调试）
有线调试：对于慢速连接来说相对更好
- 在 phone
上安装应用
- 如果 android，请使用
adb reverse tcp:8081 tcp:8081 设置端口转发，如果 iOS，请按照 RN docs) 中的步骤操作
- 在设备上启用调试
当设备上 运行 时如何调试 react-native？
您有两个选择：
- 远程调试
iOS: Cmd + ctrl + z 打开菜单 select "Debug remotely"
Android: Cmd + M 打开菜单 select "Debug remotely"
或运行这些命令之一：
react-native log-ios react-native log-android
IOS 这里有一些技巧。 在 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 上的应用程序中启用“远程调试 JS”选项。 （摇动动作，然后在打开的菜单中点击远程调试JS，就是这样。）
现在打开开发控制台，调试愉快。
为 Android 计算我们的 React Native 调试。为为此苦苦挣扎的人的步骤 -
- 启动您的 RN 应用程序
- 摇一摇装置
- Select "Dev Settings"
- Select "Debug server host & port for device" 输入您系统的 IP 地址。
- 摇一摇装置
- Select "Debug JS remotely"
- Chrome 将打开地址为“http://localhost:8081/debugger-ui”的新标签
- 如果没有发生这种情况，请检查您的端口并打开一个新选项卡并输入上述地址和您的端口号。
- 打开#Chrome DevTools（#MacOSX 上的 Cmd+Alt+I）
- Select 控制台选项卡
- 摇一摇设备
- Select "Reload"
查看所有控制台日志或在 JS 中使用 "debugger;" 进行断点调试。
如果您正在使用 Visual Studio 代码，那么您可以安装 React Native Tools 扩展（由 Microsoft 提供）并调试您的应用程序，例如任何其他 IDE.
详细阅读我的
2 选项存在：
远程调试：这将通过网络进行，因此可能会很慢。
- 运行 设备上的应用程序（插入时安装）
- 摇晃设备（Android 设备需要剧烈摇晃）
- 在开发菜单上按
settings，然后在Debugging下按Debug server host and port for device - 输入调试服务器的 IP 地址和端口（通常为 8081，除非您更改了调试服务器的设置），例如255.255.255.255:8081。您的 ip 地址是您的计算机拥有的本地 IP 地址。确保设备在同一网络上。 mac用户，打开
System Preferences→Network→Wifi→Status: connected下有一个IP地址，使用那个。 - 您可以拔下设备
- 确保调试模式已打开（再次用力摇晃设备，按调试）
有线调试：对于慢速连接来说相对更好
- 在 phone 上安装应用
- 如果 android，请使用
adb reverse tcp:8081 tcp:8081设置端口转发，如果 iOS，请按照 RN docs) 中的步骤操作
- 在设备上启用调试