Debugger for Chrome 插件已整合进 VSCode 内置 JavaScript Debugger，旧插件停更且不兼容；launch.json 中 type 必须设为 pwa-chrome，webRoot 和 sourceMapPathOverrides 需精准配置，否则断点失效。
为什么 debugger for chrome 插件现在叫 JavaScript Debugger
VSCode 1.80 版本起，Debugger for Chrome 已被官方整合进内置的 JavaScript Debugger（Nightly 版本已停更）。如果你在扩展市场搜不到旧插件，不是安装失败，而是它已“隐身”——实际调试能力由 VSCode 自带的调试器提供，无需额外安装。
常见错误现象：装了旧版 Debugger for Chrome 后 launch.json 报错 Cannot connect to the target，或断点灰掉不命中。根本原因是插件与新版 VSCode 的调试协议不兼容。
- 确认方式：打开命令面板（
Ctrl+Shift+P），输入Debug: Open Configurations，能正常打开launch.json就说明调试器已就绪 - 旧插件残留可能干扰：卸载所有名称含
chrome或debugger的第三方调试插件，只保留 VSCode 默认行为 - 不需要手动启用
debug.javascript.usePreview，该设置在 2026 年已废弃，强行设为false反而触发兼容模式降级
launch.json 中 type 应该填 pwa-chrome 还是 chrome
pwa-chrome 是当前唯一推荐值；chrome 类型已被标记为 deprecated，仅在极老项目中勉强可用。填错会导致断点无法同步、source map 加载失败、甚至调试会话直接退出。
关键区别在于协议支持：pwa-chrome 使用 Chrome DevTools Protocol（CDP）v2，支持现代特性如 ESM 动态导入断点、Worker 调试、条件断点中的表达式求值；chrome 类型仍走旧版 JS Debug Protocol，对 Vite + React 18 / Vue 3 的组合支持不稳定。
- 必须匹配浏览器启动方式：若用
request: "launch"，url必须指向本地服务（如http://localhost:5173），不能是 file:// 协议 -
webRoot要精确到源码目录，比如 Vite 项目通常设为"${workspaceFolder}/src"，而非"${workspaceFolder}"，否则断点映射失效 - 遇到
Breakpoint ignored because generated code not found错误，大概率是webRoot路径偏差或构建产物未开启 source map
sourceMapPathOverrides 怎么写才不踩坑
这个配置不是可选的“优化项”，而是 Webpack/Vite/Rollup 构建后断点映射的命脉。不配或配错，VSCode 就找不到原始 .ts/.jsx 文件，断点永远灰着。
典型错误是照抄网上模板，把 "webpack:///./src/*" 直接粘贴进来——但 Vite 默认用 rollup 打包，路径前缀其实是 "file:///" 或 "<repo_root>/src/"</repo_root>，Webpack 配置则取决于你是否启用了 devtool: "source-map" 和 output.devtoolModuleFilenameTemplate。
- Vite 项目（默认配置）：加这一行即可
"file:///*": "${webRoot}/*" - Webpack + TypeScript：优先尝试
"webpack:///src/*": "${webRoot}/src/*"，如果不行，用 Chrome DevTools 的 Sources 面板右键某个 .js 文件 → “Map to File System Resource”，看实际映射路径再反推 - 绝对不要写成
"*": "${webRoot}/*"—— 这会强制所有路径都映射过去，导致 node_modules 里的依赖也被错误关联，调试时跳进第三方库源码
调试时 console.log 不显示？别急着 reload
这不是插件问题，而是 Chrome 的 console 输出缓冲策略和 VSCode 调试器日志采集机制不一致导致的。尤其在 React/Vue 的严格模式或 Suspense 边界内，console.log 可能被吞掉或延迟输出。
真正有效的做法是绕过 console，用调试器原生能力：
- 在代码里写
debugger;语句，它比任何断点都可靠，且不受 source map 路径影响 - 右键变量 → “Add to Watch”，比反复
console.log更快定位状态变化 - 用日志断点（Log Point）：在断点上右键 → “Edit Breakpoint” → 输入表达式如
`state: ${JSON.stringify(state)}`，不中断执行，直接输出到 Debug Console
复杂点在于，很多人把调试器当成 console 的替代品，其实它最擅长的是控制执行流和观察作用域链——而不是打印。容易被忽略的是：只要 launch.json 里没关 "trace": true，Debug Console 里就能看到完整的 CDP 协议日志，里面藏着很多被 UI 隐藏的加载失败提示。
