vscode中next.js断点不生效的根本原因是未启用source map支持，需在next.config.js中设置experimental.sourcemaps: true，并在package.json的dev脚本添加--inspect参数，同时launch.json使用node-terminal类型并确保先启动next dev再调试。
VSCode 启动 next dev 时断点不生效
根本原因是默认没启用 Node.js 源码映射（source map）支持，VSCode 的调试器看不到 TypeScript 或 JSX 编译后的实际执行位置。
实操上要两步齐备：
- 确保项目已生成
.next/下的 source map：在next.config.js中显式开启experimental.sourceMaps: true（Next.js 13.4+），旧版需加devtool: 'source-map'到 Webpack 配置 - VSCode 的
launch.json必须用node-terminal类型而非pwa-node，否则无法 attach 到next dev进程 - 启动顺序不能错：先运行
next dev，再在 VSCode 里点「开始调试」——反过来会失败
next dev 调试时提示 Cannot connect to runtime process
这是 VSCode 尝试 attach 到一个不存在或未暴露调试端口的进程。Next.js 默认不开启 inspector，必须手动传参。
改法很简单，在 package.json 的 dev 脚本里加 --inspect：
"scripts": {
"dev": "next dev --inspect"
}
如果还要支持 Chrome DevTools 调试前端代码，得额外加 --inspect-brk 并配好 webRoot；但纯服务端断点，--inspect 就够了。
-
--inspect开在localhost:9229，VSCode 默认连这个端口 - 若端口被占，可指定如
--inspect=0.0.0.0:9230，同时在launch.json的port字段同步改 - 别用
--inspect-brk做常规调试——它会让进程卡在第一行，每次重启都得手动 resume，反而拖慢迭代
调试 API Route（pages/api/）时无法进入断点
API Route 是服务端运行的，但很多人误以为它和浏览器请求一样走 client-side 调试流程。其实它完全跑在 Node.js 进程里，必须用 Node.js 调试器 attach。
关键点就一个：确保请求真实发到了本地 next dev 服务，而不是被代理、缓存或跨域拦截。
- 用
curl http://localhost:3000/api/hello测试最可靠，排除浏览器插件干扰 - 如果用了
getServerSideProps或getStaticProps，断点要打在对应函数内部，不是组件渲染函数里 - 注意环境变量：
process.env.NODE_ENV在next dev下是development，但某些逻辑可能绕过调试路径（比如条件跳过日志）
TSX 文件里断点显示为「unbound breakpoint」
这不是 VSCode 问题，是 Next.js 的 SWC 编译器默认不输出 source map 到磁盘，导致调试器找不到映射关系。
必须关掉 SWC 的 source map 禁用行为：
- 在
next.config.js加compiler: { removeConsole: false, styledComponents: true }不够，得加experimental: { esmExternals: true, sourceMaps: true } - 删掉
.next/目录再next dev，否则旧缓存残留 - 确认
tsconfig.json里"sourceMap": true和"outDir"不指向空目录或node_modules
SWC 的 source map 生成比 Babel 慢一点，首次启动会多等 2–3 秒，忍一下。
