无法调试Next.js 13.4.x /app路由应用问题求助

一、VSCode 调试配置方案 #

直接修改或创建 .vscode/launch.json 文件，使用以下适配 App Router 的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: 启动带调试的开发服务",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--", "--inspect"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Next.js: 附加到运行中的服务器进程",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

• 第一个配置可直接从 VSCode 启动带调试能力的开发服务，无需手动在终端执行命令
• 第二个配置用于附加到已通过终端启动的调试进程

二、手动启动调试进程的步骤 #

1. 在项目终端执行以下命令，启动带调试标识的开发服务：
   npm run dev -- --inspect
2. 打开 VSCode 调试面板，选择「Next.js: 附加到运行中的服务器进程」配置，点击启动按钮即可完成附加

三、验证调试有效性 #

在 App Router 的服务器组件（如 /app/page.js）中添加断点，访问对应页面后，若调试器触发断点并暂停进程，则说明配置生效。

注：Next.js 的 --inspect 调试参数对 App Router 和 Pages Router 通用，核心是针对 Node.js 进程启用调试能力，无需区分路由模式。

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