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 😎
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:
create-react-appglobally by running
npm i -g create-react-app
This will create a new directory that contains the new React application.
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.
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:
Next we need to configure VSCode to use connect to Chrome.
Confused? Here’s a gif …
.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).
url property to point to the URL of the development server. For
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.
Don’t worry we’re almost done now. Next up we need to use our test project to test the debugger is working.
You can start the debugger by doing one of the following:
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 …
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 …
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.
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?