Debug React-Native with VSCode
Tags: vscode, reactnative, debug
Published: 2017-06-17 16:02:18

---
title: Debug React-Native with VSCode
published: true
description: Using Visual Studio Code to debug React-Native
tags: vscode, react-native, debug
---

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](https://code.visualstudio.com/). 

VSCode comes with a huge [extension eco-system](https://marketplace.visualstudio.com/VSCode), one of these happens to be [specifically for react-native](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native) and is even created by Microsoft itself, probably because [they also build things with RN](https://microsoft.github.io/reactxp/).

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.