3 steps to setup debugger for React Native app in WebStorm

I always feel sorry for fellow developers who only use console.log for debugging. To me having the debugger in place is a whole different level of productivity while solving problems.

Here's how you can easily set it up in WebStorm:

1. When having your project opened, go to Run>Edit configurations... or just press ⌃ + ⌥ + D and then 0
   

2. In the following window press the + sign (or ⌘ + N) and then search for React Native
   

3. Give it a proper name and turn off the Build and launch application checkbox
   
   Optionally you can remove Start React Native Bundler step if you prefer doing it manually with yarn start
   Then press Ok

That's it!

Now you can go to Run>Debug or just hit ⌃ + D (a new Chrome window should appear), run your app on a simulator or device (i.e. yarn ios), enter the In-App Developer Menu and hit Debug with Chrome.

To verify if the configuration works fine just see if the logs are visible in the Debug Tool Window:

You can also add a breakpoint to check or manipulate the values at runtime:

You can learn more about debugging at the Official React Native Documentation