Debug React-Native with VSCode
K 👓 Jun 17, 2017
[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.
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.
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.
While it comes with a whole bunch of features, the one I care about the most is a nice debugger integration.
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:
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
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.
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.