VS Code SetupIntermediate

How to Debug a Browser App in VS Code with the Built-in Chrome Debugger

Attach VS Code's debugger to a running dev server so you can set breakpoints in your front-end code and step through it in the editor.

9 minIntermediate

Debugging front-end JavaScript usually means jumping into the browser DevTools. VS Code can run the debugger inside the editor instead, so your breakpoints live in the same files you edit. This guide attaches the built-in JavaScript debugger to a local dev server and steps through browser code without leaving VS Code.

What you need

A web project with a dev server (Vite, Create React App, or similar)
Google Chrome or Microsoft Edge installed
VS Code 1.46 or newer (the JavaScript debugger is built in)

Step 1: Start your dev server

In the integrated terminal, run your dev server and note the local URL it prints. The debugger needs that exact address to attach to.

zsh - web-app

$npm run dev

VITE v5.0 ready in 380 ms

Local: http://localhost:5173/

Step 2: Add a Chrome launch configuration

Open Run and Debug with Ctrl+Shift+D, click create a launch.json file, and choose Web App (Chrome). Edit the url so it matches your dev server, and set webRoot to the folder that holds your source files.

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug in Chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Match the url exactly

If the port or path in url does not match what your dev server printed, Chrome will open the wrong page and your breakpoints will never hit. Copy the URL from the terminal.

Step 3: Set a breakpoint in your code

Open a source file, such as a click handler, and click the gutter to place a breakpoint on the line you want to inspect. The debugger maps the compiled browser code back to your source using source maps, which most dev servers enable by default.

VS Code - frontend breakpoint

Explorer

App.jsx

main.jsx

src/App.jsx

1 function handleClick() {

2* const next = count + 1 // <- breakpoint

3 setCount(next)

4 }

A breakpoint inside a button click handler.

Step 4: Launch and trigger the code

Press F5. A new Chrome window opens at your dev server URL, controlled by VS Code. Interact with the page so the code runs; click the button that triggers your handler. Execution pauses at the breakpoint and focus jumps back to VS Code.

Step 5: Inspect state and continue

Read the Variables panel to see the value of count and next at this moment. Use F10 to step over and F5 to continue. Edit your code, save, and the dev server hot-reloads the page so you can test the fix immediately.

VS Code - debug toolbar

|| continue step over step into stop

--------------------------------------------

Paused on breakpoint App.jsx:2

count = 0 next = 1

The floating debug toolbar shown while paused.

Result

Your front-end code now pauses inside VS Code with full variable inspection, mapped to the real source files. You can debug a browser app without ever opening DevTools.