Live Server是唯一支持HTTP协议、避免file://跨域和模块加载错误的方案，因其启用本地服务器而非文件路径，确保fetch、import及相对路径正常工作；而Open in Browser仅调用浏览器打开file://路径，导致CORS错误、模块加载失败且无热重载。
Live Server 是目前唯一能真正实现「改保存即刷新」的 VSCode 插件，其他方案要么不支持模块加载，要么无法绕过 file:// 协议限制。
为什么 Open in Browser 不能替代 Live Server
它只是调用系统默认浏览器打开本地文件路径，本质是 file:// 协议。这会导致：
-
fetch或XMLHttpRequest报错net::ERR_FILE_NOT_FOUND -
<script type="module">中的import路径全部失败，提示Failed to load module script - 所有 CSS/JS 修改必须手动按 F5，没有监听、没有重载、没有服务器上下文
Live Server 启动后访问的是 http://127.0.0.1:5500 而不是 file://
这个区别决定了能否跑通现代前端开发流程。启动后你看到的地址不是文件路径，而是一个真实 HTTP 服务：
- 端口可配置：
"liveServer.settings.port": 3000（写在.vscode/settings.json中） - 默认入口页可指定：
"liveServer.settings.file": "src/index.html" - 自动打开浏览器可关闭：
"liveServer.settings.NoBrowser": true，适合 CI 或 headless 场景
常见错误：修改保存后页面没刷新
这不是插件坏了，而是以下任一条件未满足：
- 当前编辑的文件**没保存**（Live Server 只响应
save事件，不是change） - 浏览器标签页被切换到后台超过 5 秒，部分 Chrome 版本会暂停 WebSocket 连接
- 项目根目录下有多个 HTML 文件，但没设置
liveServer.settings.file，导致它默认监听了错误的入口 - 用了符号链接或网络挂载盘，某些 OS 会屏蔽 inotify 监控，需加配置：
"liveServer.settings.AdvanceCustomBrowserCmdLine": ["--disable-features=IsolateOrigins,site-per-process"]
browser-preview 插件看似方便，实则不可靠
它把 Chromium 渲染器嵌入 VSCode 编辑器内，但底层仍是 file:// 加载，所以：
- 开发者工具里看不到 Network 请求，
fetch调用直接静默失败 - 无法调试 ES 模块导入链，
import报错但控制台无提示 - 右键「检查元素」弹出的 DevTools 不连实际页面，断点无效
- 它和 Live Server 不能共存——两个插件都会劫持
Go Live按钮，容易冲突
真正的即时查看只依赖一件事：HTTP 服务 + 文件保存事件 + WebSocket 通知。其余所有“一键预览”类插件，只要没走这三步，就只是伪实时。
