VSCode集成浏览器预览窗口实现实时联动-VSCode-PHP中文网

vscode本身无内置浏览器，需依赖扩展；vscode-browser-preview是当前唯一持续维护、基于真实chromium且支持调试的方案，旧版browser preview因架构过时已废弃，无法适配新版vscode与系统。

vscode集成浏览器预览窗口实现实时联动

VSCode 本身不自带浏览器预览能力，必须依赖扩展实现；vscode-browser-preview 是目前唯一仍在 actively maintained、基于真实 Chromium 渲染且支持调试的方案——Browser Preview（微软旧版）已废弃多年，强行安装可能在 VSCode 1.85+ 版本中直接崩溃或白屏。

为什么不能用旧版 Browser Preview？

旧版 Browser Preview 插件自 2022 年起被官方标记为 deprecated，源码停止更新。它依赖过时的 Electron 内嵌 WebView 和陈旧的 CDP 协议封装，无法适配现代 VSCode 的 UI 框架变更和安全策略。常见表现包括：

启动后预览窗口空白，控制台报 Failed to launch browser: Error: spawn ENOENT
点击页面无响应，DevTools 面板打不开或断连
在 macOS Sonoma 或 Windows 11 22H2+ 系统上直接拒绝加载

这不是配置问题，是底层架构失效。别花时间调 chromePath 或重装，换插件才是唯一解。

vscode-browser-preview 怎么装和启动？

这个扩展由社区维护，项目地址为 https://gitcode.com/gh_mirrors/vs/vscode-browser-preview，支持 VSCode 1.80–1.90+。安装后无需额外依赖 Chrome —— 它自带精简版 Headless Chromium，开箱即用：

打开扩展面板（Ctrl+Shift+X），搜 vscode-browser-preview，认准作者是 ms-vscode 或 gitcode 镜像源，点安装
安装后**不用重启 VSCode**，直接按 Ctrl+Shift+P，输入 Browser Preview: Open Preview 回车
首次运行会自动下载内嵌浏览器二进制（约 80MB），进度显示在右下角通知栏，耐心等完再操作

成功后，编辑器右侧会弹出一个完整浏览器窗口，地址栏可手动输入 http://localhost:3000 或任意本地服务 URL。

VSCode

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

下载

如何让预览窗口和代码保存实时联动？

vscode-browser-preview 默认不监听文件变化，它只负责渲染，不是服务器。要实现“改代码 → 自动刷新”，你得搭配一个本地开发服务器（比如 Live Server 或 vite dev），然后把预览 URL 指向它：

确保你的项目已启动本地服务（例如运行 npx vite 后看到 Local: http://localhost:5173/）
在 vscode-browser-preview 的预览窗口地址栏里，手动输入该地址（如 http://localhost:5173）
修改任意 .html、.css 或 .js 文件并保存 —— 只要后端服务支持 HMR 或 live reload，预览窗就会同步刷新

注意：vscode-browser-preview 本身没有热重载逻辑，它只是个“显示器”。真正触发刷新的是你跑的那个服务进程。如果你用的是纯静态 HTML（没起服务），那只能手动点 Browser Preview: Reload Preview。

调试时断点不生效？检查这三处

该扩展支持完整 CDP 调试，但需要正确配置 launch.json，否则 F5 启动后断点灰掉：

项目根目录下确认有 .vscode/launch.json，内容至少包含一个 browser-preview 类型配置，例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "browser-preview",
      "request": "launch",
      "name": "Preview & Debug",
      "url": "http://localhost:5173"
    }
  ]
}