Browser Preview不是普通预览插件，而是内嵌真实Headless Chromium实例，支持localStorage、fetch、WebSocket、Service Worker及DevTools调试，可直接在VS Code中右键Inspect打开调试面板，并兼容HTTPS与自签名证书。
VS Code 内置的 Markdown 预览和 open in browser 插件只能打开本地 HTML 文件，不支持 http://localhost:3000 这类开发服务器地址，也没法调试 JS —— 真正能替代浏览器窗口的，只有 Browser Preview。
为什么 Browser Preview 不是“又一个预览插件”？
它不是调用系统默认浏览器，而是内嵌一个真实的 Headless Chromium 实例，完全复刻 Chrome 渲染行为。这意味着：
-
localStorage、fetch、WebSocket、Service Worker 全部可用 - DevTools 面板可直接在 VS Code 里打开（右键 → “Inspect”）
- 支持 HTTPS + 自签名证书（通过
browser-preview.ignoreHttpsErrors开关） - 不会因系统浏览器版本差异导致样式/行为不一致
Browser Preview 启动失败常见原因
装完插件点不开预览？大概率卡在这几个地方：
- 没装 Chrome：插件依赖本地 Chrome 或 Edge（Chromium 内核），仅靠 Firefox 或 Safari 不行
-
browser-preview.chromeExecutable路径写错：Windows 默认是"C:\Program Files\Google\Chrome\Application\chrome.exe"，Mac 是/Applications/Google Chrome.app/Contents/MacOS/Google Chrome - 项目没跑起来：
browser-preview.startUrl指向http://localhost:3000，但你根本没执行npm start或vite - 端口被占：Chrome 启动时会随机选调试端口，若被其他进程（如旧版 Chrome 实例）占用，会静默失败
调试配置别漏掉这三行
想在 VS Code 里打断点、看 console.log、查网络请求，光有预览不够，必须配 launch.json：
{
"version": "0.1.0",
"configurations": [
{
"type": "browser-preview",
"request": "launch",
"name": "Preview & Debug",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/src/*"
}
}
]
}
注意：sourceMapPathOverrides 在 Vue/React 项目里几乎必填，否则断点打不到源码，只停在打包后的 app.js 上。
真正麻烦的是多入口、微前端或非标准构建路径——这时候 webRoot 和 sourceMapPathOverrides 得手动对齐实际输出结构，而不是抄模板。
