vscode-browser-preview是vs code中开箱即用且内嵌headless chromium的浏览器预览插件，支持调试、设备模拟、多窗口及忽略https错误，区别于live server等仅跳转外部浏览器的工具。
VSCode 里开浏览器预览，vscode-browser-preview 是目前最接近“开箱即用+真浏览器环境”的选择——它不是简单打开外部浏览器，而是把 Headless Chromium 嵌进编辑器，支持调试、设备模拟、多窗口，且不依赖本地 Chrome 安装（自带运行时）。
为什么不用 Live Server 或 Open in Browser？
这两款插件本质是“跳转到外部浏览器”，Live Server 提供自动刷新，Open in Browser 只是调用系统默认浏览器打开文件 URL。它们都不具备：
- 编辑器内嵌的 DevTools 面板（无法直接 inspect 元素或设 JS 断点）
- 多视口同步预览（比如同时看 desktop / mobile）
- 忽略自签名 HTTPS 证书的能力（本地
https://localhost:3000开发时常见） - 对 Vue/React 等框架中动态路由（如
/user/:id）的原生支持（vscode-browser-preview可直接加载完整 SPA）
安装后必须改的三个配置项
插件默认行为偏保守，不调整就容易卡在空白页或 404。重点配这三项：
-
browser-preview.startUrl：设为你项目的实际入口，比如http://localhost:5173（Vite）、http://localhost:3000（Create React App），别留默认的https://code.visualstudio.com -
browser-preview.chromeExecutable：绝大多数情况留空——插件自带 Chromium；只有当你需要复用已登录的 Chrome Profile（比如带插件或 Cookie）时，才填路径，例如/Applications/Google Chrome.app/Contents/MacOS/Google Chrome（macOS） -
browser-preview.ignoreHttpsErrors：开发中用自签名证书（如mkcert）时，必须设为true，否则页面白屏且控制台报net::ERR_CERT_AUTHORITY_INVALID
调试时 launch.json 怎么写才不报错
想在 VSCode 里直接打断点、看 console.log、查网络请求，光装插件不够，还得配调试器。关键点：
- 必须先装官方扩展
Debugger for Chrome（注意不是Debugger for Edge） -
launch.json的type必须是browser-preview，不是pwa-chrome或chrome -
request推荐用launch而非attach，后者需手动启动预览再连接，易超时失败 - 示例最小可用配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "browser-preview",
"request": "launch",
"name": "Preview & Debug",
"url": "http://localhost:5173"
}
]
}
如果项目用了非标准端口或代理，记得同步改 url；webRoot 字段一般不用加，除非你发现断点打不进源码（这时才需映射路径）。
常见白屏/404 的真实原因和解法
不是插件坏了，大概率是这几个细节没对上：
- 项目没真正跑起来：确认终端里
npm run dev已执行且输出类似Local: http://localhost:5173的地址，vscode-browser-preview不会帮你启服务 - URL 协议写错：用
http://，别写成https://后又没开ignoreHttpsErrors - 路径含中文或空格：VSCode 内部 Chromium 对这类路径解析不稳定，建议项目路径全用英文+下划线
- Vue Router / React Router 的 history 模式：确保服务端已配 fallback（如 Vite 的
server.host+server.historyApiFallback），否则子路由（如/about）直接 404
复杂点在于：它既不是纯静态预览工具，也不是替代 Chrome DevTools 的方案——它介于两者之间，得按“轻量版浏览器实例”来理解它的行为边界。比如修改 CSS 后不会自动重载（不像 Live Server），但你可以右键菜单选 “Reload Preview” 手动触发，或者配合文件监听插件做自动化。
