I cannot find out how to make a debugger work with server-side code

[Adam3057544]

Summary

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?

Additional information

No response

Example

No response

[icyJoseph]

I think you often need to add 9230 to the Configuration:

This used to be documented too. I'll give it a go and post a reply immediately.

[icyJoseph]

Works fine with NODE_OPTIONS='--inspect' yarn dev:

Debugger listening on ws://127.0.0.1:9229/994d7ada-659c-4848-8a35-c8a49570fcca
For help, see: https://nodejs.org/en/docs/inspector
Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger listening on ws://127.0.0.1:9230/aa27ce64-56fc-40ae-b7e0-17f73bf7abe8
For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at 9230.
   ▲ Next.js 15.1.0 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.29:3000
   - Environments: .env

 ✓ Starting...

[Adam3057544]

Thanks a lot @icyJoseph - it works for me now.
Just to put more light for somebody searching for the answer in the future:
What helped me was adding localhost://9230 in "Discover network targets". After that TWO targets displayed:

The first one still behaves as I described above. but after clicking on "inspect" in the second one I got this:

Warning: "src/app" node become visible AFTER recompiling which usually means going to the localhost://3000