3 steps to setup debugger for React Native app in WebStorm
Piotr Wilk
Posted on April 23, 2021
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 then0
In the following window press the
+
sign (or⌘ + N
) and then search forReact Native
Give it a proper name and turn off the
Build and launch application
checkbox
Optionally you can removeStart React Native Bundler
step if you prefer doing it manually withyarn start
Then pressOk
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
Posted on April 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.