React is a popular JavaScript library developed by Facebook for building web application user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.

1. Visual Studio React Native
2. Visual Studio React
3. Visual Studio React App

Upon saving the above package.json file, Visual Studio will automatically download the dependencies into a local nodemodules directory, via npm: I expect that the react, react-dom, webpack, and babel-. dependencies are already familiar to you, as they’re commonly used with React. It walks you through 'how to setup a react app in Visual Studio using the node web app template'. On that article they show debugging working, but it doesn't work for me. I am using the standard npm command to create an application inside the visual studio solution directory. I have created myself a batch file that does the heavy lifting for me. Download the Visual studio 2019 community edition. When selecting the options, be sure to at least include Desktop development with C; Ensure you have started visual studio at least once, and you are able to create a working c project. To validate this, choose Create a new project, choose Console App, and use all default options. When installing the extension React development could be really fun As VS Code from version 0.10.10 supports React components syntax inside js files the snippets are available for JavaScript language as well. In the following example you can see the usage of a React stateless component with prop types snippets inside a js and not jsx file.

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.

Visual Studio React Native

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.jsonhere. Just download it into your project directory to .vscode/launch.json

Photo by Paulo Ziemer on Unsplash

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

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for only $10!

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

Learn VS Code

If you're interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course.

Creating a Starter Project

To be able to test an Create React App application, you need an 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.

BeginnerTailwind.comLearn Tailwind CSS from Scratch

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.

Visual Studio React

create-react-app my-app

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

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

npm start

Should look like this.

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.

Visual Studio React App

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.

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'.

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.

You should get the following configuration created for you.

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

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 breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

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.

Again, if you're interested in learning more about VS Code, you'll definitely want to check out the upcoming Learn VS Code course.

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

For video content, check out my YouTube Channel

Like this article? Follow @jamesqquick on Twitter