How to set up VSCode to Debug React Apps with Chrome

How do you debug your JavaScript? I’m pretty sure that most of you would answer anything like console.log, browser dev tools or – if it’s a React app – React Dev Tools. Yep, me too 🙂

Usually, when there is something off in one of my apps, I follow a certain strategy:

console.log debugging like a pro

1. navigate to the part of the code where I suspect the bug
2. throw in a bunch of console.log statements
3. reload the app
4. switch to the browser
5. navigate to that part of the app where the bug appears
6. perform the actions to reproduce the bug
7. check the browser console

… just to see that I didn’t console.log the right variables, missed a place to log, etc. you name it.

So again, I switch back to the editor and start all over again at 1. *ugh*

Sometimes, debugging involves a lot of switching between browser and editor, navigating, reproducing and restarting. Possibly a lot of cursing too. And we can reduce a bit of the switching by using the debugger that is built into Visual Studio Code.

Why not just use the debugger of your browser,  you ask?

What about the browser’s dev tools?

We can indeed just use what’s already there. We can add breakpoints and inspect the code in your chrome dev tools too. But we still have to go back to VSCode to edit our code before again switching to the browser to reload the app and check if it worked.

If we’re writing your code in VSCode anyways, so why not leverage it’s debugging feature?

The VSCode Debugger

Using the built in debugger can spare you a lot of switching between windows, because you can just step through your code while performing changes – all in the same place!

Configure VSCode

So let’s have a look at how to configure VSCode to debug our React app.

Note: The following configuration will only work for client-side apps. For server-side rendered apps we would need a different configuration.

Prerequisites

First of all, install the extension “Debugger for Chrome”. It allows VSCode to access to our browser’s dev tools to span the gap between browser and editor.

Add Debug Configuration

Next, switch to the Debug tab, and on the top of the sidebar, click the configurations dropdown to select “Add Configuration”

You should now see a dropdown to select an Environment. Click “Chrome”

At this point, a launch.json will be generated. This is the configuration of the VSCode debugger for your project.

Adapt launch.json to your Project

In launch.json, edit two values:

1. The URL to the url and port of your app. If you created your app with create-react-app, it would be http://localhost:3000
2. Change webRoot to ${workspaceFolder}/src or – if you didn’t use CRA – to a directory where your index.js is located.

Starting your Debug Session

If it’s not already started, spin up your development server with npm start and begin your debug session by clicking the green arrow in the debug tab. Just be sure, that your previously created debug configuration is selected in the dropdown besides it.

As soon as the debugging session starts, a new Chrome window will appear and the status bar of your VSCode will turn orange.

Congratulations! Now you can set your breakpoints, watch your locales and edit code while stepping through it.

I have uploaded a working launch.json here. Just download it into your project directory to .vscode/launch.json

Improve your React Skills!

Learn about React concepts, helpful libraries or get tips & tricks for deploying your app and many more topics.

I semi regularly post about React. Don't miss out on my future posts! Sign up below to get them delivered directly into your inbox!

Leave this field empty if you're human:

Photo by Paulo Ziemer on Unsplash