next.js ssr断点不命中,主因是vscode未连接到正确的子进程且source map未启用:需用--inspect启动并配置attach模式调试,同时在next.config.js中开启experimental.sourcemaps。

Next.js SSR断点不命中,基本就是没连对进程
VSCode 默认 launch 模式调试 next dev 会 attach 到主包装进程,而 getServerSideProps、app/api/ 路由、Server Actions 等 SSR 逻辑实际运行在动态 fork 的子进程中。断点显示空心圆、hover 提示 “Breakpoint ignored because generated code not found”,说明调试器根本没加载到对应 JS 文件的 source map 上下文。
必须用 --inspect 启动 + attach 模式
不能靠 launch 直接跑 next 二进制,得让 Next.js 自己暴露 inspector 端口,再由 VSCode 主动连接。关键动作只有两步:
- 改
package.json的dev脚本:加--inspect=9229(端口可换,但 launch.json 得同步) -
.vscode/launch.json配一个attach类型配置,port对齐,type必须是node(不是pwa-node) - 启动顺序:先
npm run dev,再在 VSCode 里选这个 attach 配置点 ▶️
示例 launch.json 片段:
{
"type": "node",
"request": "attach",
"name": "Attach to Next.js SSR",
"port": 9229,
"address": "localhost",
"skipFiles": ["<node_internals>/**"],
"outFiles": ["${workspaceFolder}/.next/server/**/*.js"]
}</node_internals>
sourceMap 不开,断点永远找不到源码
Next.js 默认不把 source map 写入磁盘,尤其 App Router 下 SWC 编译器默认禁用。不配这一步,VSCode 就算连上了端口,也只看到编译后的 JS,无法映射回 .ts 或 .tsx。
- Next.js 13.4+:在
next.config.js加experimental: { sourceMaps: true } - 旧版或自定义 Webpack:需手动设
devtool: 'source-map' - 确认生成物存在:
.next/server/pages/xxx.js.map和.next/server/app/xxx/page.js.map应该有文件
常见失效场景和绕过验证法
断点灰了?先别调配置,快速验证是不是真在服务端执行:
- 在
getServerSideProps或app/api/hello/route.ts里加console.log('pid:', process.pid),刷新页面看终端是否输出——没输出=压根没走 SSR - 浏览器直接访问
http://localhost:3000/api/hello,而不是点前端按钮跳转,避免客户端导航绕过 SSR - App Router 下,
useServerSeoMeta或generateStaticParams只在首次 SSR 触发,后续路由跳转不会重跑 - 如果用了 Docker / WSL,
address得设成"0.0.0.0",且next dev --inspect=0.0.0.0:9229
最易被忽略的是:热重载后进程 PID 变了,但 VSCode 没自动重连。务必在 launch.json 里加 "restart": true,否则改一行代码再保存,断点就彻底失活了。











