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.

Answer 4

2 options exist:

Remote debug: this would go over network, so it can be laggy.

1. Run app on device (install it whilst its plugged in)
2. Shake device (Android devices need to be vigorously shaken)
3. Press settings on the dev menu, and under Debugging, press Debug server host and port for device
4. Enter your debug server's IP address and port (usually 8081 unless you changed your settings of the debug server), e.g. 255.255.255.255:8081. Your ip address is the local IP address that your computer has. Ensure the device is on the same network. For mac users, open System Preferences → Network → Wifi → Under Status: connected, there is an IP address, use that.
5. You can unplug the device
6. Ensure debug mode is on (Shake device vigorously again, press Debug)

Wired debug: relatively better for slow connections

1. Install app on phone
2. If android, set up port forwarding with adb reverse tcp:8081 tcp:8081 and if iOS, follow the steps from RN docs)
3. Enable debug on device

Answer 5

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.

Read all steps in detail in my this answer.