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.