Live Server 是最稳的实时预览方案，它启动真正的 http://localhost:5500 本地 HTTP 服务，支持 fetch、模块导入和相对路径，保存即自动刷新，行为与线上环境一致；必须通过“Open Folder”打开项目文件夹，右键 HTML 文件选择“Open with Live Server”才能正确解析路径。
VSCode 默认不运行 HTML 页面，必须借助插件启动本地 HTTP 服务——直接双击或用 file:// 协议打开会失效 fetch、模块导入、相对路径等关键功能。
Live Server 是最稳的实时预览方案
它起一个真正的 http://localhost:5500 服务，不是简单打开文件。浏览器访问该地址后，保存 HTML/CSS/JS 文件即自动刷新，且所有前端 API 行为与线上环境一致。
- 安装时只认作者是
Ritwick Dey的那个插件，别选同名但下载量低、签名未验证的 - 安装完必须点“重新加载”或重启 VSCode，否则右键菜单和状态栏不会出现选项
- 不能把单个
index.html文件拖进 VSCode 独立打开——得用File → Open Folder打开整个文件夹，否则 Live Server 无法正确解析相对路径（如./css/style.css） - 右键 HTML 文件选
Open with Live Server比点状态栏Go Live更可靠；后者有时会因当前标签页未保存或非 .html 后缀而静默失败
Live Preview 插件适合快速看结构，但有硬限制
这是微软官方出品的轻量预览工具，不启服务、纯前端渲染，适合写 Markdown 或调试简单 HTML/CSS 布局，但不适用于含 JS 逻辑、AJAX 请求或 import 模块的页面。
- 必须已保存文件（扩展名要是
.html、.css或.md），未保存的临时标签页不会触发预览 - 预览面板默认在右侧浮动，可拖到侧边栏固定成
Preview标签页，切换文件时仍保留 - 它不走网络协议，所以
fetch('./data.json')或import语句会直接报错：Failed to load module script - 修改代码后约 300ms 自动更新，但若页面用了
localStorage或监听beforeunload，行为可能和真实浏览器不一致
为什么改了代码浏览器没刷新？常见卡点
不是插件坏了，而是几个细节没对上：
立即学习“前端免费学习笔记（深入）”；
- 浏览器地址栏显示的是
file:///而不是http://localhost:5500/——说明根本没走 Live Server，得关掉旧标签，重新右键启动 - 状态栏没显示
Port: 5500——服务压根没起来，检查文件是否已保存、扩展名是否为.html、是否在工作区根目录下 - CSS/JS 修改后没生效 ——Live Server 默认加了
Cache-Control: max-age=3600，建议开发者工具 Network 面板勾选Disable cache，或手动 Ctrl+F5 强刷 - 用了 Vite/Webpack 等构建工具，又同时开了 Live Server ——端口冲突 + 热更机制打架，必然白屏或 404，二者只能二选一
真正容易被忽略的是：Live Server 的根路径默认以「当前打开的 HTML 文件所在目录」为准。比如你打开 src/pages/home.html，它就以 src/ 为根，href="css/main.css" 实际请求的是 http://localhost:5500/css/main.css，而不是 http://localhost:5500/src/css/main.css。这种错位导致资源 404，比端口问题更难排查。
