How do you debug react-native when it is running on device?
Solution 1
You have two options:
- Debug remotely
iOS: Cmd + ctrl + z to open menu and select "Debug remotely"
Android: Cmd + M to open menu and select "Debug remotely"
-
Or run one of these commands:
react-native log-ios react-native log-android
Solution 2
Figured our React Native debugging for Android. Steps to for someone struggling with this -
- Launch your RN App
- Shake device
- Select "Dev Settings"
- Select "Debug server host & port for device" Put in your system's IP address.
- Shake device
- Select "Debug JS remotely"
- Chrome will open a new tab with the address "http://localhost:8081/debugger-ui"
- If this doesn't happen, check your port and open a new tab and enter the above address with your port number.
- Open #Chrome DevTools (Cmd+Alt+I on #MacOSX)
- Select the Console Tab
- Shake Device
- Select "Reload"
View all your console logs or use "debugger;" in your JS for breakpoint debugging.
Solution 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.
Solution 4
2 options exist:
Remote debug: this would go over network, so it can be laggy.
- Run app on device (install it whilst its plugged in)
- Shake device (Android devices need to be vigorously shaken)
- Press
settings
on the dev menu, and underDebugging
, pressDebug server host and port for device
- 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
→ UnderStatus: connected
, there is an IP address, use that. - You can unplug the device
- Ensure debug mode is on (Shake device vigorously again, press Debug)
Wired debug: relatively better for slow connections
- Install app on phone
- If android, set up port forwarding with
adb reverse tcp:8081 tcp:8081
and if iOS, follow the steps from RN docs) - Enable debug on device
![Mohit Bajoria](https://i.stack.imgur.com/1L7Ew.jpg?s=256&g=1)
Mohit Bajoria
Google summer of code student, Google code in mentor, Open source contributor at mifos
Updated on June 23, 2022Comments
-
Mohit Bajoria about 2 years
How do you debug react-native when it is running on device ?