[英]How do you debug react-native when it is running on device?
react-native 在设备上运行时如何调试?
Figured our React Native debugging for Android.为 Android 设计了我们的 React Native 调试。 Steps to for someone struggling with this -解决这个问题的人的步骤 -
View all your console logs or use "debugger;"查看所有控制台日志或使用“调试器”; in your JS for breakpoint debugging.在您的 JS 中进行断点调试。
You have two options:您有两个选择:
iOS: Cmd + ctrl + z to open menu and select "Debug remotely" iOS:Cmd + ctrl + z 打开菜单并选择“远程调试”
Android: Cmd + M to open menu and select "Debug remotely" Android:Cmd + M 打开菜单并选择“远程调试”
Or run one of these commands:或运行以下命令之一:
react-native log-ios react-native log-android
There are little hack in here for IOS.对于 IOS,这里几乎没有什么 hack。 In XCode open AppDelegate.m from project folder, comment the line with jsCodeLocation declaration and add near it something like this:在 XCode 中,从项目文件夹中打开 AppDelegate.m,用 jsCodeLocation 声明注释该行并在它附近添加如下内容:
jsCodeLocation = [NSURL URLWithString:@"http://%YOUR_PC_IP%:8081/index.ios.bundle?platform=ios&dev=true"];
, where %YOUR_PC_IP% is IP of your dev machine on local net. ,其中 %YOUR_PC_IP% 是您的开发机器在本地网络上的 IP。
Then open project named RCTWebSocket wich located in Libraries folder and then open from this project file RCTWebSocketProjectExecutor.m.然后打开位于 Libraries 文件夹中名为 RCTWebSocket 的项目,然后从此项目文件 RCTWebSocketProjectExecutor.m 打开。 Next, comment the line with host declaration, then add near it something like that:接下来,用主机声明注释该行,然后在它附近添加如下内容:
host = @"%YOUR_PC_IP%";
Almost done.快完成了。 Run app on your device with XCode and make sure that your IPhone can see your develop machin via internet.使用 XCode 在您的设备上运行应用程序,并确保您的 iPhone 可以通过互联网看到您的开发机器。
After it launches make sure that node server is running (command "react-native -- --start" in root project folder) and open via chrome this page: http://localhost:8081/debugger-ui .启动后确保节点服务器正在运行(命令“react-native -- --start”在根项目文件夹中)并通过chrome打开这个页面: http://localhost:8081/debugger-ui 。 Plus, option Debug JS Remotely must be enabled in your app on your IPhone.另外,必须在 iPhone 上的应用程序中启用选项 Debug JS Remotely。 (Shake action, then tap in opened menu Debug JS Remotely, that is it.) (摇动动作,然后点击打开的菜单“远程调试 JS”,就是这样。)
Now open dev console and have happy debugging.现在打开开发控制台并进行愉快的调试。
2 options exist:存在2 个选项:
settings
on the dev menu, and under Debugging
, press Debug server host and port for device
按 dev 菜单上的settings
,然后在Debugging
下,按Debug server host and port for device
System Preferences
→ Network
→ Wifi
→ Under Status: connected
, there is an IP address, use that.对于 mac 用户,打开System Preferences
→ Network
→ Wifi
→ 在Status: connected
,有一个 IP 地址,使用它。If you are working on Visual Studio Code then you can install React Native Tools
extension (provided by Microsoft
) and debug your app like any other IDE.如果您正在使用Visual Studio Code,那么您可以安装React Native Tools
扩展(由Microsoft
提供)并像任何其他 IDE 一样调试您的应用程序。
Read all steps in detail in my this answer .在我的这个答案中详细阅读所有步骤。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.