debugger for chrome插件已彻底弃用，vscode内置javascript debugger是唯一可行方案；需卸载旧插件、启用microsoft官方javascript debugger、launch.json中type设为"pwa-chrome"、配置sourcemappathoverrides并确保sourcemap有效生成。
Debugger for Chrome 插件已彻底弃用，VSCode 内置的 JavaScript Debugger 就是唯一可行方案，强行保留旧插件会导致断点灰色、Cannot connect to runtime process 等静默失败。
确认 JavaScript Debugger 已启用且来源为 Microsoft
旧插件卸载不干净或新调试器未激活，是断点不命中的首要原因。打开扩展面板（Cmd+Shift+X 或 Ctrl+Shift+X），搜索 JavaScript Debugger：
- 状态必须是“已启用”，且发布者显示为
Microsoft（不是第三方 fork 或 Nightly 非稳定版） - 若仍存在
Debugger for Chrome插件，请右键卸载，并重启 VSCode - 在命令面板（
Ctrl+Shift+P）中输入Debug: Open launch.json，能正常打开配置文件 → 说明底层调试器就绪
launch.json 中 type 必须设为 pwa-chrome
"type": "chrome" 是遗留配置，VSCode 1.80+ 已标记为 legacy，现代构建（Vite、Webpack 5+、ESM 动态导入）下必然断点失效。
- 将
launch.json中所有"type": "chrome"替换为"type": "pwa-chrome" - 保持
"request"为"launch"或"attach"，其他字段如"url"、"webRoot"不变 - 不要加
"runtimeArgs"启动 Chrome（如--remote-debugging-port=9222），pwa-chrome会自动管理调试端口
sourceMapPathOverrides 映射必须匹配构建工具输出
断点能设上但停不到源码？大概率是 sourcemap 路径解析失败。Vite 和 Webpack 默认生成的路径与调试器预期不一致，需显式声明映射规则：
- Vite 项目：添加
"sourceMapPathOverrides": {"*": "${webRoot}/*"} - Webpack 4/5 项目：添加
"sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/src/*"} - 若用 Vue CLI 或自定义 webpack 配置，检查实际 sourcemap 中的
sources字段值（用文本编辑器打开.js.map文件查看），再按真实前缀调整映射
确保 sourcemap 文件存在且可读
内置调试器完全依赖 .js.map 文件和对应源码共存。构建未开启 sourcemap 或路径错位，就会退化成压缩代码调试。
- 开发服务器启动日志中必须出现
sourcemap: true、devtool: 'source-map'或类似提示 - 浏览器开发者工具 → Sources 面板 → 展开
localhost→ 能看到src/目录并展开原始.ts或.vue文件 → 说明 sourcemap 生效 - Vite 用户注意：
vite build默认不生成 sourcemap，开发时务必用vite dev；若用vite preview，需手动加--open并确认build.sourcemap已启用
最常被忽略的一点：多个工作区根目录（multi-root workspace）下，${workspaceFolder} 表达式会失效，必须改用 ${workspaceFolder:your-project-name} 或直接写死绝对路径。断点灰色却无报错，十有八九卡在这儿。
