How to Run and Debug Web Apps with the VS Code Integrated Browser

VS Code has a built-in JavaScript debugger for Edge and Chrome. You can debug web applications without leaving the editor. The debugger supports breakpoints in your JavaScript and TypeScript, source maps, and the full debugging toolset you use for Node.js.

The fastest way: Open Link command

Open the Command Palette and run Debug: Open Link. VS Code prompts you for a URL. Type the address of your running web app and press Enter.

VS Code opens the page in a browser and attaches the debugger. If Edge is your default browser, it uses Edge. Otherwise it uses Chrome. Any breakpoints you set in your JavaScript files trigger when the page loads and runs that code.

This method requires no configuration. It is ideal for quickly inspecting a page that is already being served by your development server.

Debug inside VS Code with the integrated browser

The integrated browser opens your web app in a tab inside VS Code, next to your editor. You never leave the editor window.

Create a launch configuration with the editor-browser type:

json

{
  "type": "editor-browser",
  "request": "launch",
  "name": "Debug in Integrated Browser",
  "url": "http://localhost:3000"
}

Press F5. A browser tab opens inside VS Code showing your app. The debugger is attached. Set breakpoints in your source files and they trigger when the page hits that code.

The integrated browser is convenient for focused debugging. It keeps everything in one window. Switch between your code and the running page using editor tabs.

Launch an external browser (Edge or Chrome)

For a full browser experience, launch Edge or Chrome in a separate window with the debugger attached.

json

{
  "type": "msedge",
  "request": "launch",
  "name": "Launch Edge",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src"
}

Use type "msedge" for Edge or "chrome" for Chrome. Both work the same way.

The url field is the address VS Code opens in the browser. The webRoot field tells the debugger where your source files live. Set it to the folder that contains your JavaScript or TypeScript source, not the compiled output folder.

To debug a static HTML file without a server, use the file field instead of url. Set it to your HTML file path and VS Code opens it directly in the browser with the debugger attached.

Attach to a running browser

If your browser is already open, attach the debugger without launching a new one. Start the browser from the command line with the remote debugging flag:

bash

chrome --remote-debugging-port=9222

Then create an attach configuration with the Chrome debugger type, the attach request, and the port number matching the one you used to start the browser:

json

{
  "type": "chrome",
  "request": "attach",
  "name": "Attach to Chrome",
  "port": 9222,
  "webRoot": "${workspaceFolder}/src"
}

Press F5 and VS Code connects to the browser. Any tabs already open become debuggable. Set breakpoints and reload the page to hit them.

Use a separate user data directory to avoid interfering with your normal browser profile:

bash

chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug-profile

Source maps and the webRoot field

The debugger needs to map the code running in the browser to your source files on disk. This mapping is handled by source maps and the webRoot field.

webRoot tells the debugger where your project's source folder is. When the browser loads a JavaScript bundle, the debugger uses source maps to find which source file each line came from. It then resolves that source file relative to webRoot.

If your breakpoints appear as hollow gray circles, the debugger cannot find your source files. Check that:

• Your build tool generates source maps. In webpack, set devtool: "source-map". In Vite, source maps are enabled by default in development.
• The webRoot field points to the folder containing your source files, not the output folder.
• The outFiles field points to the directory where compiled JavaScript is output, if different from webRoot.

Focus emulation

When you switch focus from the browser to VS Code during debugging, the page loses focus. This hides CSS focus styles, makes document.hasFocus() return false, and stops focus event handlers from firing.

The Run and Debug view has a Debug Options panel during a browser debug session. Enable the Emulate a focused page option. The page behaves as if it still has focus even when VS Code is in the foreground. This setting persists across sessions.

Troubleshooting

The browser opens but no page loads

Check that your development server is running. The url in your launch configuration must point to a reachable address. Start your server first in a terminal, or add a pre-launch task that starts it.

Breakpoints show as unverified (hollow circles)

The debugger cannot map your source file to the running code. Check that source maps are enabled in your build configuration. Verify that webRoot points to the correct folder. Try setting a breakpoint in a file you know is executed, like the main entry point, to confirm the mapping works.

The Debug Console shows source map errors

The debugger tried to load a source map and failed. This is common for third-party libraries that do not ship source maps. You can ignore these errors for libraries. For your own code, make sure source maps are being generated and the paths in the source map file are correct.

The integrated browser shows a blank page

The integrated browser may not support all web features. If your app uses WebGL, WebRTC, or other hardware-accelerated APIs, use an external browser for debugging instead. Switch your configuration from editor-browser to chrome or msedge.