断点变灰主因是sourceMap未正确配置或调试环境未同步。需检查构建工具(Vue/React/Next.js)的devtool设置、tsconfig.json的sourceMap、launch.json的sourceMaps/outFiles路径,保存后重启构建与调试会话,并确保使用官方JavaScript Debugger及pwa-chrome/pwa-node类型。

断点变灰,第一反应不是重装插件,先看sourceMap配没配对
断点显示为空心圆(○)、悬停提示“unbound breakpoint”或“breakpoint ignored”,在 TypeScript、Vue、React、Next.js 等前端项目里,八成是源映射没打通。调试器看到的是打包后的 bundle.js 或 main.js,但你点的是 src/App.tsx —— 中间缺一张“地图”,它就找不到路。
- Vue CLI 3+ 项目:必须在
vue.config.js里写configureWebpack: { devtool: 'source-map' },别用chainWebpack里调devtool(),那个无效 - React(CRA)默认已启用,但如果你
eject了,检查webpack.config.js中devtool是否为'source-map'或'eval-source-map' - Next.js:开发模式下默认有,但若用了自定义
next.config.js并覆盖了webpack配置,得手动加devtool: 'source-map' - 注意:生产环境(
mode: 'production')通常禁用source-map,所以只在本地调试时生效
launch.json 里 sourceMaps 和 outFiles 写错,等于白配
VS Code 的 JavaScript/Node 调试器不会自动猜路径,它靠 launch.json 里的字段把生成代码和源码连起来。哪怕 webpack 打出了 map 文件,这里配错照样断点失效。
- 确保
"sourceMaps": true(默认是true,但显式写出更安心) -
"outFiles"必须指向实际生成的 JS 文件位置,比如:["${workspaceFolder}/dist/**/*.js"];如果写成["./dist/**"]或漏掉**/*.js,调试器就找不到目标文件 - 若用 TypeScript,还要确认
"sourceMap": true在tsconfig.json里已开启,且outDir和launch.json中的outFiles一致 - 路径别用相对写法如
../dist,统一用${workspaceFolder}变量,避免跨平台或工作区嵌套时出错
保存、编译、重启调试,三步缺一不可
很多人改完代码、打了断点,直接点 ▶️ 调试,结果跳过——其实调试器加载的是上一轮构建产物,你的新代码根本没进去。
- Ctrl+S 保存文件(未保存的断点永远不生效)
- 触发重新构建:比如
npm run build或保存即编译的 dev server(但要确认它真刷新了.js和.map文件) - 停止当前调试会话,再点 “Start Debugging” —— 别复用旧会话,旧进程还拿着老符号
- 顺手在终端里
ls -l dist/*.js.map看 map 文件时间戳是否更新,比猜靠谱
Chrome DevTools 能断住,VS Code 断不住?那是调试器没对齐
如果你在 Chrome 里能正常打断点,但在 VS Code 里不行,说明问题不在代码或构建,而在调试协议桥接环节。VS Code 默认用的是 JavaScript Debugger(由 Microsoft 维护),不是旧版 Debugger for Chrome 扩展。
- 禁用所有其他调试类扩展,尤其
Debugger for Chrome、Debugger for Edge,它们会抢调试端口或干扰 DAP 协议 - 确认启用的是官方
JavaScript Debugger(ID:ms-vscode.js-debug),2026 年已内置,无需额外安装 - 在
launch.json中"type"字段必须是"pwa-node"(Node)或"pwa-chrome"(浏览器),不是"chrome"—— 后者走的是旧协议,不支持新版 source map 解析逻辑 - 如果用
pwa-chrome,确保"url"指向的是本地服务地址(如"http://localhost:3000"),而不是file://协议,后者不支持 sourcemap 加载
vue.config.js 没重启 dev server,或改完 launch.json 没重开调试会话。这些步骤看着琐碎,但每一步都卡在符号链路上,绕不开。










