vscode调试next.js服务端代码必须用attach模式，因app router下getserversideprops、api路由等运行在动态fork的子进程，需配--inspect=9229、"request":"attach"、"restart":true、localroot/remoteroot一致，并启用sourcemaps。
VSCode调试Next.js服务端代码必须用attach模式
断点打在getServerSideProps或app/api/xxx/route.ts里却没反应？不是插件问题，是VSCode根本没连上真正执行代码的进程。Next.js 13+（尤其是App Router）启动后，主进程只做调度，getServerSideProps、API路由、Server Actions等全部跑在动态fork出的子进程中。直接用默认launch配置调试，VSCode attach的是空壳主进程，断点自然显示为空心圆，hover提示"Breakpoint ignored because generated code not found"。
必须改用attach模式，并确保两件事同步到位：
- 启动命令加
--inspect=9229（如"dev": "next dev --inspect=9229"），端口被占可换，但必须全局对齐 -
launch.json里配"type": "node"+"request": "attach"，不能用pwa-node或node-terminal -
"restart": true必须写上——热重载会杀旧进程拉新进程，不设这个，保存一次就断连 -
"localRoot"和"remoteRoot"都设为"${workspaceFolder}"，Next.js生成的source map是相对路径，不一致就映射失败
sourceMaps不开启，断点永远找不到源文件
即使连对了进程，TSX文件里的断点还是灰的？大概率是source map根本没生成。Next.js默认不把source map写入磁盘，尤其App Router下SWC编译器默认禁用——VSCode看到的只是编译后的JS，无法回溯到你的.tsx源码。
Next.js 13.4+只需在next.config.js中加一行：
experimental: { sourceMaps: true }
旧版或自定义Webpack需手动设devtool: 'source-map'。验证是否生效：启动next dev后，检查.next/server/目录下是否存在pages/xxx.js.map或app/xxx/page.js.map文件。没有，说明配置没生效或构建没触发。
必备插件其实就三个，别装一堆“Next.js专用”
VSCode调试Next.js不靠插件，靠配置。但以下三个插件能省掉大量手动操作和误判：
-
ESLint：实时标出useClient误用、SSR/CSR逻辑混写等典型错误，比运行时报错早一步拦截 -
Prettier：统一格式，避免因缩进/分号引发的TSX编译失败，间接减少source map生成异常 -
Tailwind CSS IntelliSense（如果用了Tailwind）：补全class名时自动识别className={...}中的动态拼接，防止字符串拼错导致组件不渲染，从而误以为断点失效
其他所谓“Next.js Debugger”“Next.js Tools”类插件基本冗余，甚至可能干扰launch.json行为。
调试前先确认请求真走服务端
很多“断点不命中”其实是逻辑根本没执行。比如在app/api/hello/route.ts里打了断点，但前端用fetch发请求时走了代理、缓存或跨域重定向，实际请求压根没到本地next dev服务。
最可靠的验证方式：
- 在API文件里加
console.log('pid:', process.pid)，然后用curl http://localhost:3000/api/hello直连，看终端是否输出 - 浏览器地址栏直接访问
http://localhost:3000/api/hello，避免点击按钮触发客户端导航（SPA跳转不会重新走SSR） -
getServerSideProps只在页面首次加载时触发，后续Link跳转是客户端导航，不会重跑——别在onMounted里等它
source map路径映射、进程attach、真实执行路径，这三环缺一不可。少验一个，就容易花半天调配置，其实代码压根没跑。
