VS Code中Nx+NextJS项目服务端调试断点失效求助

核心问题分析 #

• 手动设置NODE_OPTIONS="--inspect"导致Nx和Next.js同时尝试绑定9229端口，引发冲突
• Next.js热重载会重启服务，导致调试器反复断开重连，断点无法持续绑定
• Source map配置缺失或缓存问题导致断点无法映射到源码

解决方案 #

1. 修正VS Code launch.json配置 #

替换原配置为以下内容，解决端口冲突和热重载断开问题：

{
  "name": "Launch webapp (Nx Next.js)",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "yarn",
  "runtimeArgs": [
    "nx",
    "serve",
    "webapp",
    "--inspect"
  ],
  "outputCapture": "std",
  "internalConsoleOptions": "openOnSessionStart",
  "console": "integratedTerminal",
  "port": 9230,
  "skipFiles": [
    "<node_internals>/**",
    "node_modules/**"
  ],
  "cwd": "${workspaceFolder}",
  "restart": true
}

配置说明：

• 用yarn nx serve替代直接调用nx，确保依赖环境正确加载
• 将--inspect作为runtimeArgs传递给Nx，由Nx自动处理Next.js的调试端口（Next会自动切换到9230）
• 设置port:9230让调试器直接连接Next的服务端调试端口
• restart:true让调试器在热重载后自动重新连接
• console:integratedTerminal更直观查看Nx和Next的日志输出

2. 修复Source Map问题 #

• 确保apps/webapp/tsconfig.json中开启source map：

{
  "compilerOptions": {
    "sourceMap": true,
    // 其他配置项...
  }
}

• 清理Next.js缓存：

yarn nx reset
rm -rf apps/webapp/.next

3. 临时禁用热重载（可选） #

如果调试器反复重启影响调试，可以临时禁用热重载，在runtimeArgs中添加--no-watch：

"runtimeArgs": [
  "nx",
  "serve",
  "webapp",
  "--inspect",
  "--no-watch"
]

4. 验证调试流程 #

1. 关闭所有占用9229/9230端口的进程：

lsof -ti:9229,9230 | xargs kill -9

2. 启动VS Code调试，等待Next.js提示Ready in Xs
3. 在服务端代码（比如app/page.tsx中的异步逻辑、getServerSideProps）设置断点，访问对应页面即可触发断点

内容的提问来源于stack exchange，提问作者Neil C. Obremski