断点不生效主因是调试链路中断于插件、配置或source map三处：需安装匹配版本的Debugger for Chrome/Edge插件并重启VSCode，Chrome须启用--remote-debugging-port=9222，launch.json中url、webRoot、sourceMapPathOverrides须严格对应项目类型（Vue CLI/Vite），且构建必须开启sourcemap。
断点不生效？不是代码问题，大概率是调试链路断在了插件、配置或 source map 三处中的某一个。
Debugger for Chrome/Edge 插件必须装，且版本要匹配浏览器
VSCode 本身没有内置浏览器调试能力，Debugger for Chrome 或 Debugger for Edge 是硬性依赖。截至 2026 年 4 月，Chrome 浏览器已默认启用基于 Chromium 的 PWA 调试协议，所以必须用 pwa-chrome 类型配置，旧版 chrome 类型会直接失败。
- Windows/macOS/Linux 都需额外开启远程调试端口：启动 Chrome 时加
--remote-debugging-port=9222（快捷方式属性改目标 / 终端命令加参数） - 插件安装后必须重启 VSCode，否则
launch.json里选不到pwa-chrome类型 - Edge 用户请用
Debugger for Edge，不要混用 Chrome 插件——两者协议细节有差异，容易出现“连接成功但断点不命中”
launch.json 中 url、webRoot、sourceMapPathOverrides 必须对得上
Vue CLI 项目和 Vite 项目的源码路径映射规则完全不同，错一条就看不到原始 .vue 文件里的断点。
-
url必须指向真实运行的服务地址，比如"http://localhost:5173"（Vite 默认）或"http://localhost:8080"（Vue CLI），不能写成localhost:5173/少了协议，也不能写成127.0.0.1（Chrome 会拒绝跨域 attach） -
webRoot：Vue CLI 项目填"${workspaceFolder}/src"；Vite 项目通常填"${workspaceFolder}"（因为src/是子目录，且构建时路径前缀为/） -
sourceMapPathOverrides是最常出错的地方：
– Vue CLI（Webpack）用"webpack:///src/*": "${webRoot}/*"
– Vite 用"/src/*": "${webRoot}/src/*"或更宽松的"*": "${webRoot}/*"（取决于vite.config.ts中resolve.alias和build.sourcemap设置）
Vue 3 的 ref、computed、Proxy 对象在调试器里显示不直观
VSCode 调试面板默认展开的是 Proxy 包装后的响应式对象，你看到的不是原始值，而是拦截器逻辑。
立即学习“前端免费学习笔记（深入）”；
-
ref值必须点开后找.value字段，比如count.value才是真实数字，count本身只是个对象 -
reactive或defineModel返回的 Proxy 对象，右键变量 → “Reveal in Object View” 才能绕过代理层看到原始结构 - 模板中绑定的
{{ count }}在 JS 断点里查不到同名变量——它被编译进setup()生成的渲染函数作用域，只能在render函数内部或debugger;语句里捕获
source map 没开或没生效，断点永远停在 bundle.js 上
光有调试配置不够，构建工具输出的 source map 必须存在且可读，否则 VSCode 根本不知道该把压缩代码映射回哪一行 .vue。
- Vite 项目检查
vite.config.ts是否有build: { sourcemap: true }（开发模式下默认开启，但自定义 build 配置可能关掉） - Vue CLI 项目确认
vue.config.js中devServer: { client: { overlay: true } }和configureWebpack: { devtool: 'source-map' }同时存在 - 启动调试前，在 Chrome 开发者工具的
Sources面板里手动展开左侧文件树，确认能看到webpack://或http://下挂载的原始.vue文件——看不到就说明 source map 没加载成功 - 某些 CI 构建产物会 strip source map，本地调试务必用
npm run dev或npm run serve，别用build后再 serve dist
真正卡住人的往往不是“怎么配”，而是 Chrome 端口没开、Vite 的 webRoot 写成 src 而不是项目根、或者以为 ref 是普通变量直接展开看——这些点不验证，光改 launch.json 没用。
