Browser debugging in VS Code

Visual Studio Code includes a built-in debugger for Edge and Chrome. There are a couple ways to get started with it.

• Use the Open Link command to debug a URL.
• Clicking a link in the JavaScript debug terminal.
• Use a launch config to launch a browser with your app.

We also have more detailed walkthroughs to get started with React, Angular, and Vue, as well as other debugging recipes.

Open Link command

The simplest way to debug a webpage is through the Debug: Open Link command found in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.

If your default browser is Edge, VS Code will use it to open the page. Otherwise, it will try to find an installation of Chrome on your system instead.

Launch configuration

Launch configs are the traditional way to set up debugging in VS Code, and provide you the most flexibility for running complex applications.

In this section, we'll go into more detail about configurations and features for more advanced debugging scenarios. Instructions for Node.js stepping over external code also apply to browser-based debugging.

Note: If you are just getting started with VS Code, you can learn about general debugging features and creating launch.json configuration files in the Debugging topic.

Launching browsers

In most cases, you'll want to start a new instance of the browser to debug your webpage or file. To do this, you can create a file named .vscode/launch.json that looks like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name"