断点不生效的根本原因是调试链路断裂：source map未正确生成或映射（vue.config.js需设devtool: 'source-map'，vite需build.sourcemap=true）、launch.json中type必须为pwa-chrome而非chrome、chrome需启用javascript source maps，且服务重启后才生效。
断点不生效，基本就是 sourceMap 没对上、launch.json 类型写错，或者浏览器没加载到源码映射——不是代码问题，是调试链路断了。
vue.config.js 里 devtool 必须设为 'source-map'
Vue CLI 项目默认开启 source map，但如果你改过 vue.config.js，尤其加了 configureWebpack 或 chainWebpack，很容易误关。常见错误是：
- 写了
devtool: false或devtool: 'none'—— 直接删掉或改成'source-map' - 开发环境用了
'eval-source-map'：能用，但某些断点位置可能偏移，推荐统一用'source-map' - Vite 项目则要检查
vite.config.ts中build.sourcemap是否为true（开发模式下默认开启，但若显式配置了mode: 'production'或嵌套了defineConfig({})，可能被覆盖）
launch.json 的 type 必须是 pwa-chrome，不是 chrome
VS Code 自带的 js-debug（2021 年起内置）只认 pwa-chrome，旧文档写的 chrome 类型已失效。现象是：Debugger attached 日志出来，但 .vue 文件里 setup() 内部断点显示“未绑定”。
- 确认已卸载旧插件
msjsdiag.debugger-for-chrome，不用重装任何插件 -
launch.json配置中"type": "pwa-chrome"是硬性要求 -
"url"必须和npm run serve启动后终端输出的地址一致，比如"http://localhost:8080"，不能少协议、不能写错端口 -
"webRoot"推荐写成"${workspaceFolder}/src"，不要用"${workspaceFolder}"——否则webpack:///src/*映射会失败
断点要打在可执行逻辑里，别卡在响应式声明上
Vue 3 的 setup() 或 onMounted 里，断点打在第一行常不触发，因为编译器把响应式声明（如 ref、computed）提前处理了，实际 JS 执行流从副作用函数开始。
- 把断点放在
onMounted(() => { /* 这里打 */ })或事件回调内部 - 避开
computed、useMemo类缓存逻辑——它们只在依赖变更时执行，首次渲染不一定走 - HMR（热更新）过程中断点会暂时失效，等控制台出现
[vite] hot updated:再点一次 F5 继续调试 - 实在命不中断点，临时加一行
debugger;，它比 UI 断点更可靠
Chrome 要开 Source Maps，且不能拦截本地文件
即使 VS Code 配置全对，Chrome 自身设置关了 source maps，断点照样不亮。
- 打开 Chrome DevTools → ⚙️ Settings → Preferences → Sources → 勾选
Enable JavaScript source maps - 如果项目用的是
file://协议（比如 Live Server 启动），Chrome 默认禁用 source map 加载，必须改用http://协议（即通过npm run serve或vite启动） - 不要在
launch.json里加"sourceMaps": false——这个字段已废弃，新版 js-debug 不读它
最易忽略的一点：改完 vue.config.js 或 vite.config.ts 后，必须 Ctrl+C 停掉当前服务，再重新 npm run serve（或 npm run dev），否则旧的构建产物还在内存里，source map 根本没更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
