DEV Community

Cover image for 3 steps to setup debugger for React Native app in WebStorm
Piotr Wilk
Piotr Wilk

Posted on

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

Discussion (0)