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:
When having your project opened, go to
Run>Edit configurations... or just press
⌃ + ⌥ + D and then
In the following window press the
+ sign (or
⌘ + N) and then search for
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
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