node.jsdebuggingnext.jsgoogle-chrome-devtoolsvscode-debugger

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'


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:

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

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?


Solution

  • 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)

    1. 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}/