The other way is to open the command prompt and execute this command replacing the with the actual location of your Chrome installation. Note: This will launch Chrome with remote debugging enabled every time you click on the shortcut. Select the properties option and append the following command in the target field. The simplest one is to right-click on the Google Chrome shortcut. There are two ways to launch Chrome with remote debugging in Windows. Launching a Chrome instance with remote debugging varies depending on your OS. But in order for this option to work, you need to launch Chrome with remote debugging enabled. I personally prefer using this one… This configuration attaches the debugger to a running instance of Chrome. Note: When you stop the debugger, this will close the Chrome window. If you want to launch a Chrome instance with your user and extensions, you have to close every running instance first. This means that you won’t have your extensions or opened tabs. If you have a Chrome instance running, the one launched by the debugger will use a temporary session. You can see an example of two launch configurations: One launching against a local server and the other launching against a local file. Note: Be careful while setting webRoot, this is used to resolve URLs to a file on your computer. This is the folder opened in your Visual Studio Code workspace. This can be either an absolute path or a path using the $ resolver. If you specify a URL, you have to set webRoot to the directory that files are served from.

The launch configuration launches a Chrome instance running a specified file or URL. You can set this in the request option inside every configuration object. There are two kinds of Chrome debugging configurations: launch and attach. vscode directory with a launch.json file. Like this.Īfter you’ve done this, you’re going to have a. This gear icon.Ī list of options will prompt you to select the “Chrome” one. You can create the launch file by going to the debug section in the Activity Bar and clicking the gear icon. This file contains the debugger’s different configurations for your project. The next thing you need to do is create a launch file for the Visual Studio Code Debugger. After you’ve installed it, you’re almost ready to go. The first thing you need to do is install the Debugger for Chrome extension. But if you’re here, you probably know the benefits of debugging web applications. 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. It helps you save a lot of time and keeps your code cleaner. Debugging your web applications with Visual Studio Code makes you more efficient.

Watch window in visual studio shortcuts