请求提供Next.js 14服务端代码VS Code调试可用launch.json配置

以下是针对该仓库验证有效的VS Code调试配置，覆盖启动调试和附加调试两种场景：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: Debug Server-Side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "env": {
        "NODE_OPTIONS": "--inspect"
      }
    },
    {
      "name": "Next.js: Debug Server-Side (Attach)",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

使用步骤 #

1. 确保项目依赖已完整安装：在仓库根目录执行 npm install（若仓库使用pnpm则替换为pnpm install）
2. 在项目根目录创建.vscode/launch.json文件，将上述配置粘贴进去
3. 优先使用第一个配置：在VS Code调试面板选择Next.js: Debug Server-Side并启动，它会自动启动Next.js开发服务器并附加调试器，同时打开浏览器
4. 若第一个配置无法触发断点，尝试第二个方案：
   • 打开终端，执行 NODE_OPTIONS="--inspect" npm run dev（pnpm用户替换为NODE_OPTIONS="--inspect" pnpm dev）
   • 在VS Code调试面板选择Next.js: Debug Server-Side (Attach)启动调试

注意事项 #

• 确保VS Code已安装最新版的JavaScript Debugger插件
• 服务端断点需打在服务端组件、API路由、服务器动作（Server Actions）等服务端执行的代码中
• 若调试时遇到端口占用问题，可修改attach配置中的port值，同时启动命令中的--inspect参数也需对应调整（如--inspect=9230）

内容的提问来源于stack exchange，提问作者valoricDe