Next.js server-side code debugging in VS Code or Dev Tools: lack of source files, debugger doesn't stop on 'debugging' line, breakpoints are 'unbound'

Question

I started learning Next.js and looking for a way to debug server-side code.

I read the Next.js official documentation and followed all the steps there.

I am using Node v. 23.3.0

I created my project using:

npx create-next-app@latest debug-serverside

which installed Next.js 15.1.3 and React 19.0.0

I created very simple page.tsx

export default function Home() {
  console.log('test log')
  debugger
  return (
    <div>TEST</div>
  );
}

I added launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Next.js: debug server-side",
        "type": "node-terminal",
        "request": "launch",
        "command": "npm run dev"
      },
      {
        "name": "Next.js: debug full stack",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/node_modules/.bin/next",
        "runtimeArgs": ["--inspect"],
        "skipFiles": ["<node_internals>/**"],
        "serverReadyAction": {
          "action": "debugWithChrome",
          "killOnServerStop": true,
          "pattern": "- Local:.+(https?://.+)",
          "uriFormat": "%s",
          "webRoot": "${workspaceFolder}"
        }
      }
    ]
  }

In VS Code in Debug panel when I select the first configuration "Next.js: debug server-side" and press F5 the debugger starts (the strip with start, stop buttons appears).

Now when I go to localhost://3000 in the browser:

• 'test log' shows up in the VS Code terminal

• the execution doesn't stop on debugger line

• when I click on the console.log('test log') line to create a breakpoint it appears but it's not red but gray, the execution doesn't stop on it and the hint 'unbound breakpoint' shows up when hover over it.

If I select second debugging configuration 'Next.js: debug full stack'

• the debugger doesn't start and in VS Code 'Debug Console' window below error is shown:

  SyntaxError: missing ) after argument list

  at wrapSafe (node:internal/modules/cjs/loader:1477:18)

  at Module._compile (node:internal/modules/cjs/loader:1520:20)

  at Object..js (node:internal/modules/cjs/loader:1698:10)

  at Module.load (node:internal/modules/cjs/loader:1303:32)

  at Function._load (node:internal/modules/cjs/loader:1117:12)

  at TracingChannel.traceSync (node:diagnostics_channel:322:14)

  at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)

  at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)

  at node:internal/main/run_main_module:36:49

  Node.js v23.3.0

  Process exited with code 1

So I followed the documentation and tried different options:

installed:

npm i cross-env --save-Dev

did changes in the package.json script section - changed:

"dev": "next dev --turbopack"

to:

"dev": "cross-env NODE_OPTIONS='--inspect' next dev"

run:

npm run dev

in Chrome went to:

chrome://inspect

clicked on 'Inspect' so the Node Dev Tools opened but:

In the 'Sources' tab there are 3 folders

(no domain)
file://
wasm

So there isn't

webpack://{application-name}/

as the documentation says. I checked all 3 but there aren't my source files anywhere.

The question: what I am doing wrong and how can I make my project being available for server-side debugging?

Answer 1

It works for me now. What helped was:

1. Debbuging in VS Code: changing launch.json to the one below:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "MY - Attach",
        "type": "node",
        "request": "attach",
        "port": 9230,
        "skipFiles": [
            "<node_internals>/**"
        ],
        "restart": true
      }
    ]
}

the most important changes are:

request "attach" instead of "launch"

the port 9230 (the default is 9229)

2. Debugging in Chrome Dev Tools:

in chrome://inspect adding localhost://9230 in "Discover network targets".

After that TWO targets appears - you have to "inspect" second.

Warning: your source code emerges AFTER you recompile your code which usually means going to the localhost://3000.

It is located in the node: webpack-internal://(rsc)/src/app not webpack://{application-name}/