live server 能自动刷新是因为它启动真实 http 服务并在页面注入 websocket 脚本实现通知刷新，而 open in browser 仅打开 file:// 协议页面，不监听变更、不绕过缓存与 cors 限制；根本区别在于协议（http:// vs file://）和机制（服务端通知 reload vs 无监听）。
Live Server 是唯一能真正实现“改完即刷新”的方案，其他插件如 Open in Browser 只是打开 file:// 协议页面，不监听文件变化，也不绕过浏览器缓存和跨域限制。
为什么 Live Server 能自动刷新而 Open in Browser 不能
根本区别在于协议和机制：Open in Browser 启动的是本地文件系统路径（file:///path/to/index.html），浏览器禁止其发起 fetch、读取 localStorage 或加载某些 MIME 类型资源；Live Server 启动的是真实 HTTP 服务（默认 http://127.0.0.1:5500），并在页面注入 WebSocket 客户端脚本，保存时触发服务端通知 → 浏览器执行 window.location.reload()。
- 常见错误现象：
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame→ 说明你还在用file:// - 修改
style.css后页面没变 →file://下 CSS 缓存极难清除，Live Server自动给链接加时间戳参数（如style.css?t=1722748749123） -
fetch("/api/data")报错CORS→file://协议下所有fetch请求都被视为跨域，HTTP 服务则无此限制
Live Server 启动失败的三个高频原因
点状态栏 Go Live 没反应，或右键菜单不出现，通常不是插件坏了，而是环境没对齐。
- 当前未打开任何
.html文件 ——Live Server需要一个入口文件才能推断根路径，哪怕只是空的index.html - 工作区根目录下没有
index.html，且没配置liveServer.settings.file→ 插件找不到默认启动页，会静默失败 - 端口被占（比如已有
npm run serve在跑）→ 查看 VS Code 输出面板，筛选Live Server日志，会看到Port 5500 is already in use，此时需改liveServer.settings.port
Browser Preview 插件适合什么场景
vscode-browser-preview 不替代 Live Server，而是补位：它把 Headless Chromium 渲染引擎嵌进编辑器界面，适合快速查看布局、调试样式、做设备模拟，但不提供文件监听和自动刷新能力。
- 它依赖你已有运行中的开发服务（如
http://localhost:3000），通过browser-preview.startUrl指向该地址 - 调试 JS 时可配合
Debugger for Chrome，在launch.json中配置"type": "browser-preview"，断点停在编辑器内 - 无法直接预览未启动的服务（比如只有一堆 HTML/CSS/JS 文件还没起服务器），这时必须先用
Live Server起服务
真正容易被忽略的点是：Live Server 的 root 配置。如果你的项目结构是 /src/index.html，但没设 liveServer.settings.root，它会把整个工作区当根，导致 ./css/style.css 解析失败 —— 这类路径问题不会报错，只会白屏或样式丢失。
