Debug React-Native with VSCode

Many JavaScript developers are used to simply log stuff into the console when debugging their software. This works kinda okay. Sadly it seems the console feature on React-Native isn't that sophisticated as in state of the art browsers. Often, big outputs are simply swallowed or you simply get the beloved [object Object] which hasn't much information to provide either. Sometimes you can't even use JSON.stringify() to get around this.

But as you may expected, there is a better way, a debugger.

What

Simply speaking, a debugger is a program that lets you put breakpoints at lines of your source code and watch the values of specific variables. While I have the feeling that logging still seems the way to go for most JS developers, most browsers and Node.js provide you with debug interfaces or fully integrated graphical interfaces. So it shouldn't be a foreign concept.

Why

In my opinion, debugging brings the most fun when used with the tool you wrote your code in the first place. For me this is currently VSCode.

VSCode comes with a huge extension eco-system, one of these happens to be specifically for react-native and is even created by Microsoft itself, probably because they also build things with RN.

While it comes with a whole bunch of features, the one I care about the most is a nice debugger integration.

How

I expect you to already have VSCode and the React-Native CLI installed.

First, you need to install the extension into your VSCode via the Extensions icon on the left menu. The extension is called React Native Tools.

Then you need to create (or update) your .babelrc. These are the basic settings that have to be included:

{
  "presets": [ "react-native" ],
  "sourceMaps": true
}

After that you need to create a debug environment by clicking on the Debug icon on the left menu and then on the gear. This will present you a few debug environments to choose from, here you choose React Native.

This will generate a launch.json inside a .vscode directory for you, which has a few configurations that will be used, when you start a debugging session.

After this, you simply need to set a breakpoint somewhere in your code, select one of the configurations in the select box besides the green run arrow in the debug view and click the arrow. You'll notice that the names in the select box correspond to the names in the launch.json.

Pitfalls

While this seems all straight forward, I encountered 2 problems.

One was the fact, that you need to explicitly enable debugging in your app via the React-Native Debug Menu, on the iOS simulator it's opened with cmd+d. Otherwise your breakpoints will be gray and the debugger won't stop.

The other one is that breakpoints only worked inside React's component methods. When I set a breakpoint at a place where I defined a variable, class or function in the top scope of a .js file/module it would not be hit. I didn't get around this problem at the moment.

Conclusion

Debugging is much nicer than logging. It gives you direct insight of your runtime code, while letting you stay in your beloved editor, it also doesn't require you to write additional logging code you would have to delete later.