VSCode 调试浏览器 JS 必须用官方内置的 JavaScript Debugger 插件，type 必须设为 "pwa-chrome"，webRoot 和 sourceMapPathOverrides 需精准配置以确保断点映射正确。
VSCode 本身不直接调试浏览器里的 JS，必须靠插件桥接。现在官方推荐用 JavaScript Debugger（已内置），而不是旧版 Debugger for Chrome——后者已归档，继续用可能遇到断点失效、source map 不映射、Chrome 版本兼容问题。
launch.json 中 type 字段该填 chrome 还是 pwa-chrome？
pwa-chrome 是当前唯一稳定支持现代调试协议（CDP）的 type，chrome 类型在 VSCode 1.80+ 已被标记为弃用，启动后大概率报错 Cannot connect to runtime process 或直接跳过断点。
- 必须写
"type": "pwa-chrome"，哪怕你只装了 Chrome -
pwa-chrome同时兼容 Chrome 和 Edge，无需额外配置 - 如果误写成
"type": "chrome"，即使 launch.json 其他字段全对，断点也会变灰色且无响应
webRoot 配置错一个斜杠，断点就失效
webRoot 不是“源码在哪”，而是“浏览器请求路径对应本地哪一层目录”。比如访问 http://localhost:3000/app/index.html，而你的 index.html 实际在 ${workspaceFolder}/src/app/，那 webRoot 就得设成 "${workspaceFolder}/src"，否则断点找不到映射文件。
- 常见错误：写成
"${workspaceFolder}/src/app"—— 这会导致/app/xxx.js请求无法匹配到磁盘上的src/app/xxx.js - 验证方式：在 Chrome DevTools 的 Sources 面板里看左侧文件树，展开 localhost 节点，右键某个 JS 文件 → “Map to file on disk”，路径是否指向你预期的源码位置
- 多层构建（如 webpack + public 目录）时，
webRoot通常要设为${workspaceFolder}，再配合sourceMapPathOverrides做路径重写
sourceMapPathOverrides 映射规则写错，断点永远不触发
打包工具生成的 source map 里，sources 字段常含虚拟路径（如 webpack:///./src/App.tsx），VSCode 默认不认识这种前缀，必须靠 sourceMapPathOverrides 翻译过去。
- 最简可用模板：
"webpack:///./src/*": "${webRoot}/src/*" - 如果用 Vite，默认是
"@/*": "${webRoot}/src/*"；Rollup 可能是"*": "${webRoot}/*" - 注意结尾通配符：左边没
/*、右边没/*，整个映射就失效；VSCode 不报错，但断点就是不命中 - 检查方法：在调试状态下打开“调试控制台”，输入
debugger;触发断点，然后执行require('fs').readFileSync('path/to/.map', 'utf8')查看原始 sources 字段内容
真正卡住人的从来不是“能不能装插件”，而是 webRoot 和 sourceMapPathOverrides 这两个字段的组合逻辑——它们共同决定了 VSCode 能不能把浏览器里跑的代码，准确地“指回”你编辑器里那一行。改完配置别急着重启，先看 Chrome DevTools 的 Sources 面板里有没有出现你的源码树，有，才说明映射成功。
