VS Code 或开发工具中的 Next.js 服务器端代码调试：缺少源文件，调试器不会在“调试”行停止，断点“未绑定”

Question

我开始学习 Next.js 并寻找一种调试服务器端代码的方法。

我阅读了 Next.js 官方文档并遵循了其中的所有步骤。

我正在使用 Node v.23.3.0

我使用以下方法创建了我的项目：

npx create-next-app@latest debug-serverside

安装了 Next.js 15.1.3 和 React 19.0.0

我创建了非常简单的页面.tsx

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

我添加了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}"
        }
      }
    ]
  }

在调试面板中的 VS Code 中，当我选择第一个配置“Next.js：调试服务器端”并按 F5 时，调试器将启动（带有开始、停止按钮的条带出现）。

现在，当我在浏览器中访问 localhost://3000 时：

• “测试日志”显示在 VS Code 终端中

• 执行不会在调试器行停止

• 当我单击 console.log('test log') 行创建一个 断点出现但是不是红色而是灰色的，执行 不会停止，并且提示“未绑定断点”会出现 将鼠标悬停在其上方。

如果我选择第二个调试配置'Next.js: debug full stack'

• 调试器未启动，并且在 VS Code 的“调试控制台”窗口中显示以下错误：

  语法错误：参数列表后缺少 )

  在wrapSafe（节点：内部/模块/cjs/loader：1477：18）

  在Module._compile（节点：内部/模块/cjs/loader：1520：20）

  在Object..js（节点：内部/模块/cjs/loader：1698：10）

  在Module.load（节点：内部/模块/cjs/loader：1303：32）

  在Function._load（节点：内部/模块/cjs/loader：1117：12）

  在 TracingChannel.traceSync （节点：diagnostics_channel：322：14）

  在wrapModuleLoad（节点：内部/模块/cjs/loader：218：24）

  在 Function.executeUserEntryPoint [作为 runMain] (节点:internal/modules/run_main:170:5)

  在节点：内部/主/run_main_module：36：49

  Node.js v23.3.0

  进程退出，代码为 1

所以我按照文档并尝试了不同的选项：

已安装：

npm i cross-env --save-Dev

对 package.json 脚本部分进行了更改 - 更改：

"dev": "next dev --turbopack"

至：

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

运行：

npm run dev

在 Chrome 中转到：

chrome://inspect

单击“Inspect”，节点开发工具打开，但是：

“来源”选项卡中有 3 个文件夹

(no domain)
file://
wasm

所以没有

webpack://{application-name}/

正如文档所说。我检查了所有 3 个，但到处都没有我的源文件。

问题：我做错了什么以及如何使我的项目可用于服务器端调试？

Answer 1

现在对我有用。 有帮助的是：

1. 在 VS Code 中调试： 将

   launch.json

   更改为以下内容：

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

最重要的变化是：

请求“attach”而不是“launch”

端口9230（默认为9229）

2. 在 Chrome 开发工具中调试：

在 chrome://inspect 在“发现网络目标”中添加 localhost://9230。

出现两个目标后 - 你必须第二次“检查”。

警告：重新编译代码后会出现源代码，这通常意味着转到 localhost://3000。

它位于节点：

webpack-internal://(rsc)/src/app

而不是webpack://{application-name}/