vue 3 + vite 中 debugger 不停在 vscode 是因调试配置不匹配：launch.json 的 url 必须与 npm run dev 启动地址（如 http://localhost:5173）完全一致，且需启用 sourcemap、选 chrome 调试器、配置 skipfiles 跳过 node_modules，并避免在 defineprops 等编译期语法打断点。
Vue 3 + Vite 项目里，debugger 不停在 VSCode，反而跳去 Chrome？
这是最常见错觉：你以为断点没生效，其实是 VSCode 没接管调试流程。根本原因是没配对 launch.json 的 url 和实际启动地址，或者没启用 Source Map 映射。
- 确认你的 Vite 服务是用
npm run dev启的，默认地址是http://localhost:5173；launch.json里的url必须完全一致（包括端口、协议），不能写成http://127.0.0.1:5173 - Vite 默认已生成
.js.map，但如果你改过vite.config.ts，检查是否误关了build.sourcemap或resolve.alias导致路径映射失败 - VSCode 调试器必须选中 “Chrome” 类型（不是 “Node.js”），且提前安装官方插件
Debugger for Chrome（VS Code 1.8x+ 用户请换用Debugger for Edge，因 Chrome 插件已弃用）
在 setup() 语法糖里打不了断点？script setup 编译后代码位置偏移
Vue 编译器会把 <script setup></script> 重写成带 __default__ 包裹的函数，VSCode 断点可能落在编译后代码行，而非你写的源码行——看起来像“断点漂移”。
- 确保
vite.config.ts中build.sourcemap设为'inline'或true，避免 map 文件被分离导致映射丢失 - 不要在
defineProps或defineEmits调用行打断点，它们在编译期就被处理，实际运行时不存在对应 JS 行 - 在
onMounted(() => { ... })内部、或const foo = ref(0)下一行打，这类运行时逻辑才真正可命中
断点进了 node_modules 的 Vue 源码，而不是我的组件？
这是 Source Map 把第三方包的 map 也加载进来了，VSCode 默认不区分“谁的代码该停”。尤其 Vue 3 使用 ESM 构建，其内部 dist/vue.runtime.esm-bundler.js 附带完整 map，很容易误入。
- 在
launch.json的skipFiles数组里加上"<code>**/node_modules/**"（注意双引号和通配符写法） - 如果只想跳过 Vue 自身，更精准写法是：
"<code>**/vue/**"、"<code>**/@vue/**" - 别依赖
smartStep，它在 Vue 响应式触发链里容易失效；老老实实设skipFiles最稳
热更新（HMR）后断点失效，必须重启调试器？
不是必须重启，但 HMR 会替换模块对象，旧断点绑定的执行上下文就丢了。VSCode 目前无法自动迁移断点到新模块实例。
- 开发时优先用
console.log配合debugger—— 在关键逻辑前加一句debugger，比依赖编辑器 UI 断点更可靠 - 如果非要靠 UI 断点，HMR 触发后手动在原位置再点一下断点图标，VSCode 会尝试重新绑定（前提是 sourcemap 没变）
- 禁用 HMR（
vite --no-watch）只适合极少数调试场景，日常开发不推荐
launch.json 的 url 和 skipFiles，再核对一遍 vite.config.ts 里的 sourcemap 开关，基本就扫掉八成问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
