Setting up JavaScript Debugging in Visual Studio Code
By: Matthew Macdonald
Tags: JavaScript, Visual Studio, Programming, Web Development, HTML

I’ve written before about how JavaScript is a surprisingly solid first language for beginners. However, there’s a catch. If you want to spend as much time as possible learning, and as little time as possible being frustrated, you need your programming environment to provide two essential features:

Error checking. It’s no fun when minor misspellings, inconsistent capitalization, and other tiny typos cause big problems. A good programming environment catches these issues before they blow up.

It’s no fun when minor misspellings, inconsistent capitalization, and other tiny typos cause big problems. A good programming environment catches these issues before they blow up. Debugging. Some mistakes aren’t just a matter of syntax. To solve these problems, you need tools that can help you dig into your code and see what it’s actually doing (as opposed to what you think it’s doing).

If you’re working with my favorite HTML and JavaScript editor, the free Visual Studio Code, you get error checking for free. All you need to do is stick a special @ts-check comment at the top of your JavaScript files, like this:

// @ts-check

function init() {

var myNumber = 42;

myNumber = "Some text that is no number";

The @ts-check comment tells VS Code to pay attention to your JavaScript and underline potential issues in red:

Red underlining highlights mistakes, like putting text in a numeric variable

There are other ways to turn error checking on or off for a whole group of files in VS Code, but that’s a topic for another day. What’s more important is the second half of the equation — debugging.

Debugging is much trickier to get working. Because VS Code is designed to work for both simple experiments and huge web applications, there are a couple of different ways to set up debugging. In this article, you’ll learn the easiest way to get started.

Installing the Chrome debugger

The first thing you should know is that JavaScript debugging only works in Google Chrome. Other browsers are great, but if you’re writing a new page in VS Code, you’ll need to use Chrome to test it.

VS Code is designed to be as lightweight as possible, and for that reason the basic package doesn’t include a JavaScript debugger. (That’s not entirely true — technically, VS Code has a JavaScript debugger for websites that run code in the Node.js environment on a web server, but that’s a completely different kettle of fish.)

Fortunately, you can install the Chrome debugger easily. Here’s what to do:

Start VS Code. Choose File→Preferences →Extensions from the VS Code menu (or just press Ctrl+Shift+X to get there in a hurry). This opens the EXTENSIONS panel on the left side of the VS Code window. In the search box, type “Chrome.” You’ll see the “Debugger for Chrome” extension appear at or near the top. Click the tiny green Install button next to that extension.

Finding the Chrome debugger

4. Now close VS Code. The next time you run it, everything will be up to date.

Opening your website folder

Now you have the Chrome debugger installed in VS Code. But you need to do a bit more work to get VS Code to run the debugger when you need it.

You might think you could just open any old HTML or JavaScript file and attach the debugger to that. Sadly, VS Code isn’t built that way. Instead, you need to put your files together in a folder, and you need to open that whole folder in VS Code. That’s because VS Code’s advanced configuration system works on folders, and you need this configuration system to enable JavaScript debugging.

To open your folder in VS Code, choose File→Open Folder, and pick the folder that holds your website files. If your folder has other subfolders inside it, that’s great — they show up in VS Code too.

The EXPLORER panel shows website files

If your website folder is empty, that’s not a problem either. Once you’ve opened your folder you can use the File→New File command to add new HTML and JavaScript pages to your folder.

When your folder is open, you’ll see its contents in the EXPLORER panel. If you close the EXPLORER panel or cover it up with something else, you can show it again with the handy keyboard shortcut Ctrl+Shift+E.

Before you go any further, it helps to have a sample page to work with. All you need is an HTML page with a chunk of JavaScript or — better yet — an HTML page that uses a function from a separate JavaScript file. Don’t have that on hand? Here’s a ridiculously simple website folder with a one-page painting app, packaged up in a handy ZIP file. Just drag it onto your desktop and open it up in VS Code before you continue with the next steps.

Adding a debug configuration

If you try to start debugging your web page right now, it won’t work. The problem is that VS Code assumes you’re hosting your site with a web server, and it expects to find that web server running on your computer. You could set this up with another VS Code extension and some more configuration. But that’s overkill for this example.

Instead, what you really need is a new debug configuration — basically, some setup instructions that tell VS Code how to run your site. In this case, you want the debug configuration to tell VS Code to open your pages directly from the file system, rather than contact a web server.

Here’s how to add the debug configuration you need:

1. Choose Debug→Open Configurations.

2. Because you’re doing this for the first time, VS Code needs to know what sort of debugger you want. Choose “Chrome” from the list of options. (Don’t be worried if a warning message pops up in the bottom-right corner of the VS Code window, telling you that you don’t have the debugger for .NET Core. You definitely don’t need that.)

The Chrome debugger is the one you want

3. Now VS Code creates a configuration file named launch.json, and opens it in the editor window.

At first, the launch.json file looks something like this:



// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "

"webRoot": "${workspaceFolder}" }

]

} // Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes."version": "0.2.0","configurations": ["type": "chrome","request": "launch","name": "Launch Chrome against localhost","url": " http://localhost:8080 ","webRoot": "${workspaceFolder}" }

You need to modify these details to get the debugger to work properly. But don’t touch the type or request settings. They’re already good to go.

The name setting doesn’t have any effect, but it’s best to reword it to something that describes what you’re actually going to do (like “Launch Chrome from the file system” or just “Launch Chrome”).

The url and webRoot settings tell VS Code to use a web server on your computer, which isn’t what you want. Delete these settings, and add a file setting instead that looks like this:

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

"version": "0.2.0",

"configurations": [

{

"type": "chrome",

"request": "launch",

"name": "Launch Chrome from the file system",

"file": "${workspaceFolder}"

}

]

}

The ${workspaceFolder} part is a handy stand-in your current website folder. By using this shortcut, you ensure your project will keep working even if you rename the website folder or move it somewhere else.

Now, save your work with a quick Ctrl+S. When you do, VS Code creates a folder named .vscode inside your website folder, and places the launch.json file in there. As long as you leave that folder in place, VS Code will keep using the debug configuration you just set, and you’ll never need to crack open the .json file again.

Too lazy to do it yourself? Here’s the single-page paint project, with the launch.json properly in place.

Testing the debugger

Now it’s time for the moment of truth! To run your website, choose Debug→Start Debugging (or press F5). VS Code will start Chrome and point it to your website folder. Chrome will then show you a list of all the files in your website folder, which looks something like this:

Files in the “Website Project” folder

To load a page, click it in the list.

You could alter the ${workspaceFolder} setting to point to a specific page, like ${workspaceFolder}/Paint.html . If you do that, Chrome will go directly to the page you specify when you run your VS Code project. But the folder list approach is usually more convenient for testing.

Now here’s the real test: is the debugger working? The easiest way to tell is to set a breakpoint in your code. When your code hits the breakpoint, the execution of your page will pause, and you’ll be able to peek at your variables, run simple commands, and execute one line of code at a time in the VS Code window.

To set a breakpoint, open a JavaScript file, find the line you want to use, and click in the left margin (to the left of the line numbers). A red circle will appear to mark your breakpoint.

Here’s an example that puts a breakpoint on the line of code that sets the isDrawing variable in the Paint.html page:

Click in the margin to add a breakpoint

Now, run your page again. When VS Code hits the breakpoint, everything freezes in the browser. Switch back to the VS Code window, and you’ll find your code paused at the point you picked. Now you can dig deeper with VS Code’s debug tools, or just hit F5 to resume your code and carry on.

One final trick for debugging inline JavaScript

The debugging approach you just learned works on any JavaScript file. But if you have a block of JavaScript code inside an HTML file, you’re more limited. Ordinarily, Visual Studio won’t let you set any breakpoints in HTML files. It’s picky that way.

If you run into this problem, there’s a simple workaround:

Choose File→Preferences→Settings. Type “breakpoints” into the search box. Switch on the “Allow setting breakpoints in any file” setting.

Check this setting to allow breakpoints in HTML files

Now you can add a breakpoint to any JavaScript, whether it’s in a separate script file or right inside your web page HTML.