VSCode本身无内置浏览器，需依赖扩展；vscode-browser-preview是当前唯一持续维护、基于真实Chromium且支持调试的方案，旧版Browser Preview因架构过时已废弃，无法适配新版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-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"
}
]
}
- 确保
url值与你当前预览窗口访问的地址完全一致（协议、端口、路径都不能差） - 断点必须打在已加载的 JS 文件里 —— 如果是模块动态 import 的代码，需等对应 chunk 加载后再打，否则会 pending
最容易被忽略的是：预览窗口必须是通过调试配置启动的（F5 或命令面板选 “Debug: Select and Start Debugging”），而不是手动点 Open Preview。后者没有 attach 调试会话，自然无法停住。
