Debugging React Like a Champ with VSCode

VSCode debugging tools and Facebook’s Jest

Gone are the days where I spend my time bouncing back and forth between the terminal, browser and editor. Ain’t nobody got time for that!

In this guide I will show you how to supercharge your React workflow with Visual Studio Code’s debugging features. You will learn how to hook up VSCode and Chrome so you can debug browser code directly from VSCode 😎

Setup the Test Project

Before we begin with the tutorial we need to create a test application that we’ll use later in the article. I use create-react-app a lot of the time because I hate writing boilerplate. We will use it for this tutorial too. Alternatively if you have an existing application you can use that.

First create the test project:

1. Install create-react-app globally by running npm i -g create-react-app
2. Once installed create a new project by running create-react-app vscode-tutorial

This will create a new directory that contains the new React application.

Setting Up VSCode

Next up we need to install the VSCode extension so it knows how to talk to Chrome. VSCode connects to Chrome through Chrome’s debugger protocol. This is the same debugger protocol that Chrome’s developer tools use. Instead of using Chrome’s developer tools you can use VSCode to debug browser code.

Installing Debugger for Chrome Extension

To get VSCode and Chrome communicating with each other we need to install an extension called Debugger for Chrome. Install it by navigating to the extensions pane and searching for: debugger for chrome. It should look similar to below:

Debugger for Chrome VSCode Extension

Configuring VSCode to Connect to Chrome

Next we need to configure VSCode to use connect to Chrome.

1. Click on the debugging icon
2. Click the dropdown menu (next to the play button) and press “Add Configuration …”
3. Select “Chrome” from the “Select Environment” dropdown.

Confused? Here’s a gif …

A new .vscode directory will automatically be added to your project’s root directory. The directory will contain a launch.json file which is used to configure VSCode’s debugger for your current project. Each time you create a new project you will have to follow the same steps to setup remote debugging (or copy the .vscode directory from one project to the next).

Modify the url property to point to the URL of the development server. For create-react-app it’s [http://localhost:3000](http://localhost:3000). Your launch.json should look like this (thanks to Kenneth Auchenberg from VSCode for the launch suggestion) …

A full list of configuration options can be found here.

Running The Debugger

Don’t worry we’re almost done now. Next up we need to use our test project to test the debugger is working.

Start The Debugger

You can start the debugger by doing one of the following:

• Press F5
• Press the green play button in the debug pane
• From the menu Debug > Start Debugger

If the debugger starts successfully you will see a small toolbar appear at the top of VSCode similar to the image below …

Set a Breakpoint

A breakpoint is used to tell the debugger to pause the execution of code at a specific point in the code. This allows you to inspect variables, the call stack, and make modifications to code as the application is running.

Let’s set a breakpoint in the test app. Open src/App.js and click the mouse in the gutter next to line 11. A red dot should appear to indicate a breakpoint has been added. If you’re a bit confused see the gif below …

Start The Development Server

And finally to see everything working in unison start the development server buy running npm start in the terminal. This will start a new server that can be access at the address http://localhost:3000/

Navigate to http://localhost:3000/ and you should see the page “freeze”. This is because the application has hit the breakpoint. If you switch back to VSCode you will notice line 11 is highlighted and the debug pane is updated to reflect the call stack.

If everything worked successfully congratulations! You have just learned how to setup remote debugging in VSCode. If you want to learn more about debugging in VSCode read this.

Continuous Testing With Jest

It’s helpful for me to have my unit tests running alongside the debugger. I like my tests to run every time I make modifications to the implementation. Thankfully create-react-app is automatically setup to do this. Simply type npm test at the terminal to start jest. It will automatically watch your files and run on save. It looks like this …

Pretty cool huh?

In future articles I will go into more detail on how to debug JavaScript. If you found this article helpful and want to keep up to date with all the shiny things in the JavaScript and web development world follow me on Twitter.

Happy debugging!

Further Reading

• https://code.visualstudio.com/docs/editor/debugging
• https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
• https://github.com/Microsoft/vscode-chrome-debug
• https://facebook.github.io/jest/