提升VSCode工作流的浏览器调试插件-VSCode-PHP中文网

debugger for chrome 已被弃用，应改用 vscode 内置的 javascript debugger；需卸载旧插件、确保版本 ≥1.60，配置推荐 "type": "pwa-chrome"，正确设置 webroot 和 sourcemappathoverrides，并优先使用 attach 模式调试。

提升vscode工作流的浏览器调试插件

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 修正。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

常见错误：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 字段——这些细节不验一遍，换十款插件也没用。