VSCode调试浏览器端JS必须用pwa-chrome或pwa-firefox；断点灰掉、跳压缩文件、变量乱码，90%因sourceMaps、webRoot、url未配对。
VSCode 调试 JavaScript 浏览器端代码，必须用 pwa-chrome（或 pwa-firefox），不能用 chrome 或 node；断点灰掉、跳到压缩文件、变量名变成 _a，90% 是因为没配对这三样：sourceMaps、webRoot、url。
为什么选 pwa-chrome 而不是 chrome
VSCode 1.8x 版本起，旧的 chrome 类型调试器已逐步弃用。pwa-chrome 支持 ES modules、现代 sourcemap 解析、跨域脚本映射，且能正确处理 Vite / Webpack Dev Server 的动态路径。用错类型，哪怕其他全对，断点也大概率变空心、提示 Unbound breakpoint。
实操建议：
-
type字段必须写成"pwa-chrome"，大小写敏感，不能是"PWA-Chrome"或"Chrome" - 不需要额外安装 “Debugger for Chrome” 扩展（它已内置）；但若装了旧版，建议卸载，避免冲突
- 如果项目用 Firefox 开发，对应用
"pwa-firefox"，配置逻辑一致
launch.json 里最关键的三项必须严丝合缝
复制网上的配置常失效，根本原因是 url、webRoot、sourceMaps 没和你的实际运行环境对齐。
实操建议：
-
url必须是完整可访问地址，末尾带斜杠："http://localhost:5173/"（Vite 默认端口），不能写成"localhost:5173"或漏掉/ -
webRoot必须指向源码根目录：Vite 项目通常是"${workspaceFolder}/src"，Create React App 同样；纯 HTML + JS 项目可能是"${workspaceFolder}" -
sourceMaps必须显式设为true，否则 VSCode 不尝试解析.map文件，断点直接打在构建产物上
断点变灰？先查 sourceMap 是否真加载成功
灰色断点 = VSCode 找不到源码与运行代码的映射关系。常见于 Vite/React/Vue 项目，表面配置都对，但实际没生效。
实操建议：
- Vite 用户检查
vite.config.ts中build.sourcemap是否为true（开发模式下默认开启，但生产构建可能关掉） - 打开「调试控制台」，搜索
Loaded source map from—— 看到类似Loaded source map from 'file:///xxx/src/main.ts.map'且无 404，才算真正加载 - 禁用浏览器缓存：Chrome DevTools → Network → 勾选
Disable cache，否则可能加载旧的、无 map 的 JS - 避免在
minify: true下调试；Vite 可临时设build.minify = false
为什么断点停在 eval 或乱码路径上
这不是 VSCode 故障，而是构建工具用了不兼容的 devtool 配置（如 Webpack 的 eval、cheap-module-eval-source-map），导致 source map 无法定位原始文件。
实操建议：
- Webpack 用户：把
devtool改为'source-map'或'inline-source-map'，禁用所有eval类型 - TypeScript 用户：确认
tsconfig.json含"sourceMap": true和"inlineSources": true，且编译后.js.map与.js同目录 - 多包项目（如
packages/foo/src）：在launch.json加"resolveSourceMapLocations": ["${workspaceFolder}/packages/**/src/**", "!**/node_modules/**"]
最易被忽略的一点：VSCode 不参与实际调试控制，它只做源码映射和断点同步。真正执行暂停、读取变量的是 Chrome DevTools。所以当你发现断点命中但变量全是 _a，问题不在 VSCode 设置，而在构建产物是否携带了可读的 source map 内容——重跑构建、清缓存、再验证 Loaded source map from 日志，比反复改 launch.json 更有效。
