Tutorial

Debugging Create React App Applications in Visual Studio Code

Draft updated on Invalid Date
Default avatar

By James Quick

Debugging Create React App Applications in Visual Studio Code

This tutorial is out of date and no longer maintained.

Introduction

In this post, we are going to create a Create React App application, then add configuration to debug it in Visual Studio Code.

For a Create React App application, install the Debugger for Chrome extension, create a debug configuration in VS Code, and then run in debug mode.

Creating a Starter Project

To be able to test a Create React App application, you will need a Create React App application. I’ll provide the basic steps, but for more reference on how to get started look at the Create React App page.

First, you’ll need to install the Create React App.

  1. npm install -g create-react-app

After that finishes, you’ll need to actually generate your new application. This will take a bit as it needs to install lots of npm packages.

  1. create-react-app my-app

Open the project in VS Code and you should see the following.

Create React App Project in VS Code

Now, that you’ve got your new fancy React app, go ahead and run it to make sure everything looks right.

  1. npm start

Should look like this.

Create React App Project Running

Creating Debug Configuration

Assuming you’ve made it this far, we are ready to start debugging! Before we do, however, it’s worth understanding how configuring debugging in VS Code works. Basically, debug configurations are saved in a launch.json file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

Debugger for Chrome

Now, to create a debug configuration, you can open the debug panel (the bug-looking button on the left panel). At the top of the debug panel, you should see a dropdown that says “No Configurations”.

Create Debug Configurations

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Then choose Chrome.

Choose Chrome Debug Configuration

You should get the following configuration created for you.

Create React App Debug Configuration

The only thing we need to do is update the port from 8080 to 3000.

Updated Create React App Debug Configuration

Let’s Debug

Now we’re ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

With this up and running, you can set a breakpoint in your App.js. Open up your App.js and add a breakpoint inside of the render function by clicking in the gutter (to the left of the line numbers). Should look like this.

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoint. You should be directed back to VS Code directly to the place where you set your breakpoint.

Conclusion

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

If you have any follow-up questions or comments, leave one below or find me on Twitter @jamesqquick.

For video content, check out my YouTube Channel

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
James Quick

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel