How do you debug React Native?

Question

How does one debug their React code with React Native while the app is running in app simulator?

Answer 1

First in your ios simulator, if you press [command + D] key then you can see this screen.

Then click Debug JS remotely button.

After you might see React Native Debugger page like this.

And then open your inspector[f12], and go to console tab debug it! :)

Answer 2

Debugging React Native Apps

To debug the javascript code of your react app do the following:

1. Run your application in the iOS simulator.
2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture
3. Enable Pause On Caught Exceptions for a better debugging experience.
4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
5. You should now be able to debug as you normally would.

Optional

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload

To activate Live Reload do the following:

1. Run your application in the iOS simulator.
2. Press Control + Command + Z.
3. You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debugging options.

Answer 3

By default, my ios simulator wasn't picking up the keystrokes which is why cmd-D didn't work. I had to turn on the settings for the keyboard using simulator's menu:

Hardware > Keyboard > Connect Keyboard

Now cmd-D launches chrome debugging.

Answer 4

cmd ⌘ + D oddly didn't work for me. Pressing ctrl + cmd ⌘ + Z in the iOS simulator did kick off the debugging browser window for me.

This is the screen that pops up:

More details here.

Answer 5

Try this program: https://github.com/jhen0409/react-native-debugger

Works on: windows, osx and linux.

It supports: react native and redux

You can also inspect the virtual component tree and modify styles that are reflected in the app.

Answer 6

Debugging react-native 0.40.0 on Debian 8 (Jessie) can be done by navigating to http://localhost:8081/debugger-ui in Chromium or Firebug while your app is running in the android simulator. To access the in-app developer menu, run the following command in another terminal window, as pointed out here:

adb shell input keyevent 82