必须选pwa-chrome（或pwa-msedge），因VS Code 1.8x+已弃用旧chrome协议，继续用"type":"chrome"会导致断点不命中、浏览器闪退；url须与浏览器地址栏完全一致（含协议、localhost、端口），webRoot统一填"${workspaceFolder}"，sourceMapPathOverrides按Vite（"/src/"）或Vue CLI（"webpack:///src/"）严格匹配。
必须选 pwa-chrome（或 pwa-msedge），chrome 类型已失效，点断点不命中是大概率结果。
为什么不能用 chrome 类型？
VS Code 1.8x+ 版本彻底弃用旧版 chrome 调试协议。Debugger for Chrome 插件虽仍可用，但底层已切换为 PWA 协议；继续用 "type": "chrome" 会导致：
- 调试器静默失败，控制台无报错，但断点始终为空心圆
- 即使连接成功，
setup()或onMounted内部断点也完全不触发 - Chrome 浏览器启动后立即关闭（尤其在 Windows 上）
正确做法是统一改用 pwa-chrome，Edge 用户则用 pwa-msedge——两者协议一致，微软持续维护，兼容性更稳。
launch.json 中 url 和 webRoot 怎么填才不翻车？
这两个字段错一个，断点就进不了 .vue 文件。关键不是“看起来像”，而是和实际运行环境严丝合缝：
立即学习“前端免费学习笔记（深入）”；
-
url必须和你在浏览器地址栏里手动输入并能打开的那个地址**完全一致**：包括协议（http://或https://）、域名（必须用localhost，别写127.0.0.1）、端口（Vue CLI 是:8080，Vite 是:5173）、路径（如/admin也要带上） -
webRoot填"${workspaceFolder}"最安全：Vite 项目根目录即源码起点；Vue CLI 项目虽然src/是源码目录，但 Webpack 构建时路径前缀是/，所以仍应设为工作区根目录，而非"${workspaceFolder}/src"
sourceMapPathOverrides 映射规则怎么配？
这是断点映射失败的最高发区域。不同构建工具生成的 source map 路径前缀不同，硬套模板必踩坑：
- Vite 项目（默认 vite.config.ts）：浏览器加载的 source map 路径以
/src/开头 → 配"\"/src/*\"": "${webRoot}/src/*" - Vue CLI（Webpack）项目：路径前缀是
webpack:///src/→ 配"\"webpack:///src/*\"": "${webRoot}/src/*" - 如果用了
resolve.alias（比如@: "@/），需额外加一条："\"webpack:///@/*\"": "${webRoot}/src/*"
验证是否生效：在 Chrome DevTools 的 Sources 面板里，展开左侧文件树，能看到 webpack:// 或 /src/ 下真实展开的 .vue 文件，才算映射成功。
断点打在哪才真正有效？
不是所有位置都适合打断点，尤其 Vue 3 的响应式逻辑会干扰执行流：
- 避开
ref、computed、defineModel等声明语句首行——它们只是返回 Proxy 对象，没执行业务逻辑 - 优先打在
onMounted、onUpdated、事件回调函数内部，或watch的回调里 -
<template>中的{{ count }}不对应 JS 变量名，它被编译进渲染函数作用域；想查值，得在setup()函数体里找count.value或右键变量 → “Reveal in Object View”
热更新（HMR）期间断点会短暂失效，这不是配置问题，等几秒再刷新即可；但若一直无效，八成是 sourceMapPathOverrides 没对上源码路径结构。
