3 steps to setup debugger for React Native app in WebStorm

wilkuintheair

Piotr Wilk

Posted on April 23, 2021

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
    image

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

  3. Give it a proper name and turn off the Build and launch application checkbox
    image
    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:
image

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

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

💖 💪 🙅 🚩
wilkuintheair
Piotr Wilk

Posted on April 23, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related