How do you debug react-native when it is running on device?

Question

How do you debug react-native when it is running on device ?

Answer 1

Figured our React Native debugging for Android. Steps to for someone struggling with this -

1. Launch your RN App
2. Shake device
3. Select "Dev Settings"
4. Select "Debug server host & port for device" Put in your system's IP address.
5. Shake device
6. Select "Debug JS remotely"
7. Chrome will open a new tab with the address "http://localhost:8081/debugger-ui"
8. If this doesn't happen, check your port and open a new tab and enter the above address with your port number.
9. Open #Chrome DevTools (Cmd+Alt+I on #MacOSX)
10. Select the Console Tab
11. Shake Device
12. Select "Reload"

View all your console logs or use "debugger;" in your JS for breakpoint debugging.

Answer 2

You have two options:

1. Debug remotely

iOS: Cmd + ctrl + z to open menu and select "Debug remotely"

Android: Cmd + M to open menu and select "Debug remotely"

2. Or run one of these commands:

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

Answer 3

There are little hack in here for IOS. In XCode open AppDelegate.m from project folder, comment the line with jsCodeLocation declaration and add near it something like this:

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.

Then open project named RCTWebSocket wich located in Libraries folder and then open from this project file 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.

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 . Plus, option Debug JS Remotely must be enabled in your app on your IPhone. (Shake action, then tap in opened menu Debug JS Remotely, that is it.)

Now open dev console and have happy debugging.