browser preview已弃用，因底层webview api与vs code 1.89+及chromium 126+不兼容，导致白屏、js中断、css变量失效等问题；应卸载并改用vs browser——它基于原生webview重构，内存占用低、支持file://和http://协议、无跨域拦截，且f12可调出简化版devtools。
Browser Preview 已弃用，别再装了
VS Code 官方市场里 Browser Preview 插件右上角已明确标出“Deprecated”，它底层依赖的旧版 Webview API 与当前 VS Code（1.89+）及 Chromium 126+ 存在兼容性断裂。实际表现是：启动白屏、JS 执行中断、CSS 变量不渲染、甚至触发 ERR_CONNECTION_REFUSED 错误。这不是你配置的问题，是插件本身停止维护导致的必然结果。
如果你刚装完发现预览窗打不开，或者点开后一片空白——不用折腾 startUrl 或 verbose 日志，直接卸载。它不再适配现代 VS Code 的进程模型和沙箱策略。
VS Browser 是目前最稳的内置浏览器替代方案
VS Browser 不是 Browser Preview 的简单复刻，而是基于 VS Code 原生 webview + vscode-webview-ui-toolkit 重构的轻量实现。它不嵌入完整 Chromium 实例，而是复用编辑器已加载的渲染引擎，内存占用稳定在 40–70MB（实测 16GB 内存机器），且无白屏、无跨域拦截、支持 localhost 和 https:// 混合加载。
- 安装后无需额外配置，默认点击状态栏
VS Browser图标即可打开新 tab - 右键 HTML 文件 →
Open in VS Browser，自动以file://协议加载（适合静态页） - 对开发服务器友好：输入
http://localhost:3000后回车，能正常加载 React/Vue 的 HMR 资源 - 不支持调试断点，但支持 DevTools 快捷键：
F12呼出原生开发者工具（注意：不是 Chrome 扩展版，而是 VS Code 自带的简化版）
Live Server + 外部 Chrome 是真·高效组合
如果你需要断点调试、网络面板分析、React DevTools 或 Vue Devtools，VS Browser 和 Browser Preview 都做不到。这时候必须回到外部浏览器，而 Live Server 是最轻量可靠的桥梁。
关键点在于：不要让 Live Server 自动唤起默认浏览器（容易错配 Edge 或 Safari），而是强制绑定 Chrome：
- 在 VS Code 设置中搜索
liveServer.settings.CustomBrowser，设为"chrome" - 确保 Chrome 已安装且路径未被重命名（Windows 默认路径有效，macOS 需确认
/Applications/Google Chrome.app存在） - 避免同时启用
Live Server和Debugger for Chrome—— 后者会监听 9222 端口，若 Chrome 已被 Live Server 占用，会导致调试配置失败，报错Unable to attach to process - 热重载生效前提是文件保存触发 HTTP 304 或 200 响应；如果看到页面闪白但内容没变，检查是否启用了 Service Worker 缓存（可在 Chrome DevTools → Application → Clear storage 中一键清空）
本地预览别忽略 file:// 协议限制
直接双击 HTML 文件或用 VS Browser 打开本地 file:// 路径时，浏览器会禁用 fetch、XMLHttpRequest、import 动态模块等能力，报错 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
这不是插件问题，是浏览器安全策略。解决方式只有两个：
- 用
Live Server启一个http://服务（哪怕只是单页），绕过限制 - 临时启动简易服务：终端执行
npx serve -s（需全局安装serve）或python3 -m http.server 8000，然后访问http://localhost:8000
真正容易被忽略的是：很多前端同学以为 “能打开就是能跑”，结果在本地测试时一切正常，一部署到 Nginx 就报 CORS 或模块加载失败——根源往往就在这一步没走对。
