Live Server 是最稳的静态页面实时预览方案，它通过轻量 HTTP 服务绕过 file:// 限制，比 Browser Preview 更快更可靠；启动方式需区分工作区与单文件场景，配置 Chrome 为默认浏览器需修改 settings.json 中 liveServer.settings.CustomBrowser。
直接用 Live Server 就够了，95% 的静态页面开发场景不需要更复杂的方案。它不依赖外部浏览器进程、不卡顿、不报错，保存即刷新，是目前最稳的实时预览路径。
为什么 Live Server 比 Browser Preview 更适合日常预览
Browser Preview 听起来高级，但本质是启动一个无头 Chromium 实例再把画面“投屏”进 VS Code——这带来三个实际问题：首次加载慢、内存占用高、遇到 CORS 或 file:// 协议时经常白屏或报 net::ERR_FILE_NOT_FOUND。而 Live Server 只起一个轻量 HTTP 服务（默认端口 5500 或你配的 8080），所有资源走 http://localhost:xxx，完全绕过浏览器对本地文件的限制。
常见错误现象：
- 右键点击 HTML 文件选
Open with Live Server没反应 → 检查文件是否在 VS Code 打开的**文件夹工作区**内（单独拖一个 .html 文件进来不生效） - 浏览器打开后显示
Cannot GET /→ 项目根目录下没有index.html，或你没在settings.json里配"liveServer.settings.file": "xxx.html" - 修改 CSS 后页面没刷新 → 确认你保存的是被引用的原始 CSS 文件，而不是构建产物（如
dist/style.css）
Live Server 的三种启动方式怎么选
不是所有方式都等效，得看当前上下文：
- 状态栏
Go Live按钮：只对当前打开的文件夹工作区有效，自动找index.html或你配置的默认文件，适合长期开发同一个项目 - 资源管理器右键 HTML 文件 →
Open with Live Server：强制以该 HTML 为入口启动服务，适合多页项目中临时预览某个子页面（比如login.html） - 快捷键
Alt+L, Alt+O（Windows/Linux）或Cmd+L, Cmd+O（Mac）：和右键行为一致，但更快；注意不是连按，是先按Alt+L松开，再按Alt+O
别用编辑器内右键（代码编辑区空白处右键）——这个选项在新版 VS Code 中已移除，点了也没反应。
如何让 Live Server 自动用 Chrome 打开而非系统默认浏览器
VS Code 默认调用系统默认浏览器，但前端调试必须用 Chrome（开发者工具更全、兼容性反馈更准）。改法很简单，不用装额外插件：
- 打开 VS Code 设置（
Ctrl+,），搜索liveServer.settings.CustomBrowser - 点“编辑 in settings.json”，添加一行：
"liveServer.settings.CustomBrowser": "chrome" - 如果 Chrome 不在标准路径（比如你用的是 Edge 内核的 Chrome 兼容版），可以指定完整路径：
"liveServer.settings.ChromeDebuggingAttachment": true并配合launch.json调试，但日常预览没必要
注意："openInBrowser.default": "chrome" 是给 Open in Browser 插件用的，对 Live Server 无效，写在这里纯属浪费配置。
哪些情况 Live Server 会失效，必须换方案
它不是万能的。以下场景建议切换到 Browser Preview 或直接用外置 Chrome：
- 项目需要 HTTPS（比如调用
navigator.mediaDevices.getUserMedia）→Live Server只支持 HTTP，此时启用Browser Preview的ignoreHttpsErrors配置项更直接 - 调试 Service Worker 或离线缓存逻辑 →
Live Server每次重启都会清空注册的 SW，得用真实 Chrome 的隐身窗口手动控制 - 预览打包后的
dist/目录 →Live Server默认不监听子目录变更，需额外配"liveServer.settings.AdvanceCustomBrowserCmdLine": "--new-window --disable-web-security"，但风险高，不如直接拖dist/index.html到 Chrome
真正容易被忽略的点是：所有这些插件都依赖 VS Code 对文件系统的监控精度。如果你用的是 WSL2 或网络共享盘，Live Server 的文件变更检测可能延迟 1–2 秒，这时候别怀疑插件，先检查 VS Code 是否启用了 "files.useExperimentalFileWatcher": true。
