Debugger for Chrome 已被弃用，应改用 VSCode 内置的 JavaScript Debugger；需卸载旧插件、确保版本 ≥1.60，配置推荐 "type": "pwa-chrome"，正确设置 webRoot 和 sourceMapPathOverrides，并优先使用 attach 模式调试。
Debugger for Chrome 已被弃用，改用 JavaScript Debugger
VSCode 官方在 2021 年后已将 Debugger for Chrome 功能整合进内置的 JavaScript Debugger (Nightly)，现在安装旧插件反而可能引发冲突或断点不触发。如果你看到 launch.json 中 "type": "chrome" 仍能工作，那只是兼容性保留，实际底层已是新调试器。
正确做法是：卸载所有名为 Debugger for Chrome 的扩展，确保 VSCode 版本 ≥ 1.60（当前稳定版默认启用），无需额外安装插件即可调试。
- 检查方式：打开命令面板（
Ctrl+Shift+P），输入Debug: Toggle Auto Attach，若可执行说明调试器就绪 - 旧配置中
"type": "chrome"仍可用，但推荐统一改为"type": "pwa-chrome"，它支持现代 ES 模块、源映射和异步调用栈 - 如果断点灰色不可用，大概率是 source map 路径没对上，而不是插件没装
launch.json 中 webRoot 和 sourceMapPathOverrides 怎么配才不翻车
webRoot 不是“项目根目录”，而是浏览器加载的原始源码所在路径——通常对应构建产物中的 sources 映射起点。比如 Vite 项目 dev server 返回的 /src/App.vue，实际文件在 ${workspaceFolder}/src/App.vue，这时 webRoot 必须设为 ${workspaceFolder}；但如果是 Webpack + HtmlWebpackPlugin 打包后部署到 /dist，且 sourcemap 声明了 webpack:///src/，就得靠 sourceMapPathOverrides 修正。
- 常见错误：
webRoot错设成${workspaceFolder}/src，导致断点打在src/App.js却无法命中，因为调试器按http://localhost:3000/src/App.js去找，而实际 URL 是http://localhost:3000/App.js - Webpack 场景下必加：
"sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/src/*" } - Vite / Next.js 等现代工具链通常开箱即用，
webRoot设为${workspaceFolder}即可，不用写sourceMapPathOverrides
vscode-browser-preview 和内置调试器的区别在哪
vscode-browser-preview 是个独立预览环境（基于无头 Chromium），它不连接真实调试协议，所以不能设断点、看作用域变量、单步执行——它只做“刷新预览”和“基础 DevTools”。真要调试 JS，必须用 VSCode 内置的 pwa-chrome 配置，走 CDP 协议连真实 Chrome 实例。
- 适合场景：
vscode-browser-preview用来快速验证 HTML/CSS 渲染、响应式布局、截图存档；不适合查useState更新时机或 Promise 链断裂 - 冲突风险：两个插件同时启用时，
Browser Preview的快捷键（如Ctrl+Shift+Alt+B）可能覆盖调试器的F5启动行为 - 网络请求看不到：它的 Network 面板是模拟的，不捕获真实 fetch/XHR，查 API 问题必须切回 Chrome DevTools 或用
pwa-chrome的调试配置
attach 模式比 launch 模式更稳，但得手动开 Chrome
用 "request": "launch" 时，VSCode 会尝试启动新 Chrome 实例并传参（如 --remote-debugging-port=9222），但 Windows 权限、Chrome 多用户 profile、杀毒软件都可能拦截，导致端口被占或进程闪退。换成 "request": "attach"，你手动开 Chrome（带调试参数），VSCode 只负责连接，成功率高得多。
- 手动启动命令（Windows）：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir=C:\tmp\chrome-debug - 对应配置中删掉
url，加上"port": 9222和"timeout": 10000 - 注意：手动开的 Chrome 不能是已运行的日常浏览器窗口，必须用独立
--user-data-dir，否则调试器连不上
webRoot 指错了路径、Chrome 被系统策略锁死了远程调试端口、或者构建工具生成的 sourcemap 根本没包含 sources 字段——这些细节不验一遍，换十款插件也没用。 
