vscode-browser-preview 是唯一能替代外部浏览器并支持断点和 devtools 的 vs code 插件，需正确配置 chrome/edge 路径、launch.json 的 request 类型及 webroot 才能正常启动和调试。

VS Code 内置的预览能力非常有限，Live Server 只能开一个默认浏览器窗口、不支持调试；而真正能替代外部浏览器、支持断点和 DevTools 的，只有 vscode-browser-preview —— 它不是“增强预览”，而是把 Headless Chromium 直接塞进编辑器里跑。

Browser Preview 插件安装后打不开？先查这三件事

常见错误是点击按钮没反应，或弹出 Failed to launch browser。这不是插件坏了，而是底层 Chromium 启动失败：

• 确认系统已安装 Chrome 或 Edge（仅支持 Chromium 内核，Firefox / Safari 不行）
• 检查设置里 browser-preview.chromeExecutable 是否为空 —— 如果自动探测失败，必须手动填路径，比如 Windows 上是 C:\Program Files\Google\Chrome\Application\chrome.exe
• 打开 VS Code 的「输出」面板（Ctrl+Shift+U），切换到「Browser Preview」频道，看是否有 Failed to connect to Chrome 或权限拒绝类报错

launch.json 里 type: "browser-preview" 配不生效？注意 request 类型

调试配置写对了但 F5 没反应，大概率是 request 值选错了。它只有两种合法值，不能混用：

VSCode

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

下载

• "request": "launch"：用于首次启动预览并附加调试器，必须配 url 字段（如 "http://localhost:3000"）
• "request": "attach"：用于连接已打开的预览窗口，此时不能带 url，否则会报 Cannot specify both url and request: attach
• 如果项目用了 Webpack/Vite 等 dev server，建议优先用 launch，避免手动开窗口再 attach 的步骤

预览自动刷新但 JS 断点不命中？webRoot 是关键

断点灰掉、hover 显示 “unbound breakpoint”，问题几乎都出在源码映射上。即使你开了 sourceMap: true，VS Code 仍需知道从哪开始匹配文件路径：

• 在 launch.json 的配置中必须显式声明 "webRoot": "${workspaceFolder}"
• 如果项目结构是 /src/main.js 编译后输出到 /dist/index.html，且 index.html 引用的是 ./main.js，那 webRoot 就得设成 "${workspaceFolder}/dist"，否则路径对不上
• 不依赖 pathMapping 或 sourceMapPathOverrides 的简单项目，webRoot 设对就足够让断点正常工作

真正难调的不是装插件，而是 Chromium 启动参数、路径映射和调试协议之间的微妙配合。哪怕只漏掉一个 webRoot，断点就失效；Chrome 路径多一个空格，预览就起不来 —— 这些细节不报错，只静默失败。