Set breakpoints in Next.js with VS Code and Chrome DevTools

Updated 28 October 2026 · 6 min read

Breakpoints beat console.log for any bug you cannot explain in a minute. Here is how to set them in both halves of a Next.js app, with Chrome DevTools, VS Code or no setup at all.

Server code with Chrome DevTools

NODE_OPTIONS='--inspect' npx next dev

On Windows, set the variable with cross-env or set NODE_OPTIONS=--inspect first. Recent Next.js versions also accept next dev --inspect.

1. Open chrome://inspect in Chrome.
2. Click Open dedicated DevTools for Node, or inspect under the Next.js remote target.
3. In Sources, press Cmd/Ctrl + P and open your file.
4. Click a line number, then load the page or call the route.

Client code with Chrome DevTools

Open DevTools on your app's page, go to Sources, press Cmd/Ctrl + P and type the component's file name. Set the breakpoint and interact with the page. To pause during the first render, set it and reload.

VS Code

Add .vscode/launch.json to your project:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ]
}

Pick a configuration in the Run and Debug panel and press F5. Breakpoints set in the editor gutter now pause the server or the browser.

When a breakpoint never hits

• The file is not compiled yet. Next.js compiles routes on demand. Load a page that uses the file, then the breakpoint binds.
• The code runs in the other place. A breakpoint in a Server Component never pauses the browser, and an onClick handler never pauses the server.
• You attached to the wrong process. Next.js starts more than one Node process; pick the one that serves your pages.
• The code did not run. Add a console.log or a debugger; statement to prove the line is reached.

Breakpoints with no setup

qaisdebugs connects to the dev server by itself. Run qaisdebugs dev, open the Sources view at http://127.0.0.1:4983, and click a line number in any Server Component, Route Handler, Server Action or Client Component. Client breakpoints pause in the Chrome window qaisdebugs dev opens, and a breakpoint set once applies to both the server and the page.