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.
Top comments (7)
what does the .babelrc look like after adding:
{
"presets": [ "react-native" ],
"sourceMaps": true
}
?
I couldn't get any version of this to work on either android or ios, I'm not sure whether I'm missing something or whether the react-native versions are just ahead of the VSCode support at the moment..
Hm, I haven't used this since I wrote this article.
Could be that RN changed too much since then :/
probably yes
That itself is perhaps an interesting feedback on the usefulness of debugging in VSCode..
Xamarin debugging in Visual Studio seems to work well but given that react-native is still changing fast I'd stick to the Chrome debugger and react-devtools as more likely to avoid versioning issues.
Good advice.
I did everything you advised, but VS code is not stopping on the break-points....have tried everything and at an impasse.
Could you please help?
Yes, it seems to be a bit of a hassle.
Another commenter here wrote about problems last year already.
Seems like React-Native and/or VSCode changed something, but I would have to search myself.
hi，if my react-native(iOS) project have many targets(no simulator), and I debug in vscode, how to change targets.(it aways run one of these)