提升VSCode效率必装的浏览器预览插件-VSCode-PHP中文网

browser preview不是普通预览插件，而是内嵌真实headless chromium实例，支持localstorage、fetch、websocket、service worker及devtools调试，可直接在vs code中右键inspect打开调试面板，并兼容https与自签名证书。

提升vscode效率必装的浏览器预览插件

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` 启动失败常见原因

装完插件点不开预览？大概率卡在这几个地方：

VSCode

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

下载

没装 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 得手动对齐实际输出结构，而不是抄模板。