VSCode内置JavaScript Debugger已替代Debugger for Chrome插件，需启用官方调试器、将launch.json中"type":"chrome"改为"pwa-chrome"、配置sourceMapPathOverrides映射、确保sourcemap正确生成，并可选attach模式调试。
如果您在VSCode中尝试使用Debugger for Chrome插件进行前端调试，却发现插件未生效、断点无法命中或扩展市场显示“已弃用”，则可能是由于该插件已被官方整合或替代。以下是解决此问题的步骤：
本文运行环境：MacBook Pro M2，macOS Sequoia。
一、切换至内置 JavaScript Debugger
VSCode 自 1.46 版本起已将 Debugger for Chrome 功能合并进官方内置调试器，不再依赖独立插件。该调试器以 JavaScript Debugger (Nightly) 或默认启用的 JavaScript Debugger 形式存在，支持 Chrome、Edge 及其他基于 Chromium 的浏览器。
1、打开 VSCode 扩展视图（快捷键 Cmd+Shift+X）。
2、搜索 JavaScript Debugger，确认其状态为“已启用”且来源为 Microsoft。
3、若存在已安装的 Debugger for Chrome 插件，点击其右下角“卸载”按钮并重启 VSCode。
二、验证 launch.json 中 type 字段是否适配新调试器
旧版 launch.json 使用 "type": "chrome"，而内置调试器要求使用 "type": "pwa-chrome" 或 "type": "pwa-msedge"，否则调试会静默失败。
1、在项目根目录打开 .vscode/launch.json 文件。
2、将原配置中 "type": "chrome" 替换为 "type": "pwa-chrome"。
3、确保 "request" 字段仍为 "launch" 或 "attach"，其余字段如 "url" 和 "webRoot" 保持不变。
三、检查 sourceMapPathOverrides 映射是否兼容 Webpack/Vite 构建路径
现代构建工具（如 Vite、Vue CLI、Webpack 5+）生成的 sourcemap 路径与旧版 debugger 不一致，需显式声明映射规则，否则断点无法定位到原始源码。
1、在 launch.json 的对应 configuration 中添加 "sourceMapPathOverrides" 字段。
2、针对 Vite 项目，设置为：{"*": "${webRoot}/*"}。
3、针对 Webpack 项目，设置为：{"webpack:///src/*": "${webRoot}/src/*"}。
四、启用自动 sourcemap 识别并验证构建输出
内置调试器依赖有效的 sourcemap 文件（.js.map）与源码文件共存，若构建未生成或路径错误，调试将退化为压缩后代码断点。
1、检查项目开发服务器启动日志，确认输出中包含 "sourcemap: true" 或类似提示。
2、打开浏览器开发者工具 → Sources 面板 → 展开 localhost → 查看是否存在 src/ 目录及可展开的原始 .vue 或 .ts 文件。
3、若仅显示 bundle.js 且无 src 层级，说明 sourcemap 未正确注入，需修改 vite.config.ts 或 vue.config.js 中的 build.sourcemap 或 devtool 配置。
五、以调试模式启动 Chrome 并手动附加
当 launch 模式失效时，attach 模式可绕过 VSCode 启动流程，直接连接已运行的、启用远程调试端口的 Chrome 实例。
1、完全退出所有 Chrome 进程（包括后台进程）。
2、终端执行：open -a "Google Chrome" --args --remote-debugging-port=9222（macOS）。
3、手动访问 http://localhost:3000（或对应开发地址）。
4、在 launch.json 中新增 configuration，"request": "attach"，"port": 9222，"webRoot": "${workspaceFolder}"。
