by Victor A. Requena

Debugging your web applications with Visual Studio Code makes you more efficient. It helps you save a lot of time and keeps your code cleaner. This is because you don’t have to write a bunch of console.logs and you can go through your code execution line by line. But if you’re here, you probably know the benefits of debugging web applications. So let’s begin…

Getting set up

The first thing you need to do is install the Debugger for Chrome extension. After you’ve installed it, you’re almost ready to go. The next thing you need to do is create a launch file for the Visual Studio Code Debugger. This file contains the debugger’s different configurations for your project.

You can create the launch file by going to the debug section in the Activity Bar and clicking the gear icon.

AUFWFZ8FQncLNTOIsD2at38qFq0GQOWErXm0
This gear icon.

A list of options will prompt you to select the “Chrome” one.

gV9J3xLjSklXcHaK4QdXWXzkkf1t84eh5OFO
Like this.

After you’ve done this, you’re going to have a .vscode directory with a launch.json file.

Configurations

There are two kinds of Chrome debugging configurations: launch and attach. You can set this in the request option inside every configuration object.

Launch

The launch configuration launches a Chrome instance running a specified file or URL. If you specify a URL, you have to set webRoot to the directory that files are served from. This can be either an absolute path or a path using the ${workspaceFolder} resolver. This is the folder opened in your Visual Studio Code workspace.

Note: Be careful while setting webRoot, this is used to resolve URLs to a file on your computer.

You can see an example of two launch configurations: One launching against a local server and the other launching against a local file.

If you have a Chrome instance running, the one launched by the debugger will use a temporary session. This means that you won’t have your extensions or opened tabs. If you want to launch a Chrome instance with your user and extensions, you have to close every running instance first.

Note: When you stop the debugger, this will close the Chrome window.

Attach

I personally prefer using this one… This configuration attaches the debugger to a running instance of Chrome. But in order for this option to work, you need to launch Chrome with remote debugging enabled. Launching a Chrome instance with remote debugging varies depending on your OS.

Windows

There are two ways to launch Chrome with remote debugging in Windows. The simplest one is to right-click on the Google Chrome shortcut. Select the properties option and append the following command in the target field.

--remote-debugging-port=9222

Note: This will launch Chrome with remote debugging enabled every time you click on the shortcut.

The other way is to open the command prompt and execute this command replacing the <chrome_path> with the actual location of your Chrome installation.

<chrome_path>\chrome.exe --remote-debugging-port=9222

macOS

Open the terminal and execute the following command:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux

Launch your terminal and run this command:

google-chrome --remote-debugging-port=9222

What this does — no matter what OS — is open Chrome with a flag, in this case: --remote-debugging-port, and sets it to 9222. You can read more about this here.

Note: If you have other Chrome instances running with no remote debugging, make sure to close them before launching a new one.

Here’s a sample attach configuration.

Note: If you do not set the "url" option, a list will be prompted with your open tabs.

This extension have a lot of very useful options that you can use to adapt the configurations to your project. You can read the documentation of some of them here.

Summary

Congratulations! You’ve learned how to install and set up the debugger for Chrome in Visual Studio Code. You also learned how to launch Google Chrome with remote debugging enabled. Now it’s time for you to explore and expand your new knowledge… I highly recommend you to take a look at the extension’s repository.

I hope you enjoyed this post. You can find me on Twitter @_svictoreq. ?