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

I don't have enough reputation to comment on the previous answers which are great. :) Here are some of the ways how I am debugging when developing react-native app.

1. Live reloading

   react-native makes it super easy to see your changes with the ⌘ + R keys or even just enable live reload and watchman will "refresh" the simulator with the latest changes. If you get an error, you can get a clue from the line number from that red screen. A couple of undo will get you back to working state and start again.

2. console.log('yeah, seriously.')

   I find myself prefer letting the program run and logging some informations than adding a debugger break point. (tough debugger is useful when trying to work with external packages/libraries and it comes with autocompletion, so you know what other methods you can utilise.)

3. Enable Chrome Debugging with debugger; break point in your program.

Well it depends on the type of errors you encountered and your preferences of how to debug. For most of the undefined is not an object (evaluating 'something.something'), method 1 and 2 will be good enough for me.

Whereas dealing with external libraries or packages written by other developers will require more effort to debug hence a good tool like Chrome Debugging

Sometimes it is coming from the react-native platform itself so googling for react-native issues will definitely helps.

hope this helps someone out there.

Answer 2

For Android: Ctrl + M (emulator) or Shake the phone (In Device) to reveal menu.

For iOS: Cmd + D or Shake the Phone to reveal menu

Make sure you have chrome.

On the revealed menu select Debug JS Remotely Option.

Chrome will be opened automatically at localhost:8081/debugger-ui. You can also manually go to debugger with this link.

There reveal console and you can see logs being noted.

Answer 3

1. Run your app in simulator - react-native run-ios
2. Press ctrl + d and click on Debug JS Remotely

1. webpage should open up at http://localhost:8081/debugger-ui , if not type the URL and go to this link in Chrome
2. Right click on the page and click Inspect and it should open the developer tools for chrome

3. Go to the sources in the top menu and find your js class file in the right hand side file explorer

4. You can put breakpoints to the view and debug the code in there as you can see in the image.

Answer 4

In React-Native debugging is much easier.

• To debug in IOS use

cmd + d

ctrl + cmd + z ( For simulator )

• To debug in android

Shake device with touch ( Make sure your developer option is enable )

Answer 5

If you are using Microsoft Visual Code , then install React Native Tools extension. Then you can add break points simply by clicking on the desired line number. Follow these steps to setup and debug app :

Dont forget to enable Debug JS Remotely in emulator if you using it.

Answer 6

1. If you are using emulator use Ctrl+M & simulator Cmd+D

2. Click on the - Debug js remotely

3. Google Chrome go to console