How to make Next.js debugging useful?

Question

From the Next.js VSCode debugging page, I got the following launch.json.

{
  "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"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

After running the full stack option, Next.js starts like any old npm run dev. The problem is that the debugging isn't very useful. In my debug terminal I have it selected so that there are breakpoints on caught exceptions. In Python applications (where my debugging experience lies), VSCode pauses on the exact line number whenever there is an exception and gives a useful, understandable error.

With Next.js, the breakpoint gives me a complicated, general error that leads to some random Next.js source code. This has next to no meaning for me.

For example, I got a promise rejected error. This is likely from a request I made that was handled with .catch using Axios. Next.js pointed me to the following deeply nested file.

\node_modules\next\dist\server\dev\on-demand-entry-handler.js

On line 202 it caught an error in code which I have never seen before. Upon unpausing the breakpoint, it leads to more of these errors.

How can I make Next.js debug for me more efficiently? I want more clear, understandable errors, that lead me to specific lines of code that I actually wrote.

Answer 1

this works I just test it. it is different from the original posted here in the nextjs site in these two lines

What I understood from this that instead call the local nextjs script I call my npm from my Windows 11.

And this is debuggin the whole project as well.

{
  "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",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "skipFiles": ["<node_internals>/**"],
      "serverReadyAction": {
        "action": "debugWithChrome",
        "killOnServerStop": true,
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "webRoot": "${workspaceFolder}"
      }
    }
  ]
}

Answer 2

After several attempts below lauch.json config worked for me for next js 15 with typescript and turbopack

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Next.js: Debug Server",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
        "runtimeArgs": ["dev"],
        "console": "integratedTerminal",
        "skipFiles": [
          "<node_internals>/**",
          "${workspaceFolder}/node_modules/**"
        ],
        "cwd": "${workspaceFolder}"
      },
      {
        "type": "chrome",
        "request": "launch",
        "name": "Next.js: Debug Client",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
      }
    ],
    "compounds": [
      {
        "name": "Next.js: Full Stack Debug",
        "configurations": ["Next.js: Debug Server", "Next.js: Debug Client"]
      }
    ]
  }