Logo

dev-resources.site

for different kinds of informations.

3 steps to setup debugger for React Native app in WebStorm

Published at
4/23/2021
Categories
reactnative
debugger
productivity
5days5blogposts
Author
wilkuintheair
Author
13 person written this
wilkuintheair
open
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

debugger Article's
30 articles in total
Favicon
A Comprehensive Guide to Debugging Go Code for Developers
Favicon
Top Java Debugging Tools for Efficient Application Development
Favicon
Mastering Debugging in C++: Techniques, Tools, and Best Practices for Developers
Favicon
Comprehensive Guide to Python Debugging Tools for Efficient Code Troubleshooting
Favicon
How to configure Delve (dlv) in VS Code
Favicon
Hover Console: Real-time JavaScript debugging directly on your webpage
Favicon
Debugging with breakpoints in ExUnit
Favicon
Precisamos falar sobre ipdb: Uma Jornada para um debugger mais Eficiente em Python
Favicon
Introduction to Debugging with React Developer Tools
Favicon
JavaScript Magic Tricks: Debugger Interception
Favicon
Streamlining Nodejs Error Debugging with Errsole Debugger: Node.js
Favicon
debugging in python for beginners
Favicon
Advance Free Debugger
Favicon
Setup ruby/debug with VSCode
Favicon
Integrating requestly mobile debugger in PostBook App
Favicon
HyperDbg: State-of-the-art native debugging tool
Favicon
Show properties of an object during the debug
Favicon
Debugging Swift in VS Code the old way
Favicon
Levelling up - 2: Use the debugger
Favicon
debug.gem blog: initial commit
Favicon
Become a Toolmaker
Favicon
3 steps to setup debugger for React Native app in WebStorm
Favicon
Kinx v0.19.3 Preview Released
Favicon
Debug Go with VIM
Favicon
Debugging As a Developer
Favicon
Ways to create a new Chrome instance without CORS [macOS]
Favicon
Stop Using Print and Die Statements
Favicon
Debugging Python applications (plus free cheat sheet)
Favicon
Dude, get a debugger!
Favicon
Introduction of LLDB

Featured ones: