Live Server 解决双击打开 HTML 的协议限制问题：file:// 下 fetch、localStorage 等 API 静默失效，CSS @import 和相对路径易 404；它通过 http://127.0.0.1:5500 提供标准 HTTP 服务，支持跨域资源加载与实时刷新。
VS Code + Live Server 是目前 HTML 模板本地编辑与预览最省心的组合，5 分钟内可完成全部配置，无需 Node.js 运行时，也不依赖 Python 或其他服务端环境。
为什么双击打开 index.html 会出问题
浏览器对 file:// 协议有硬性限制：JS 的 fetch()、XMLHttpRequest、localStorage 在部分场景下静默失败；CSS 中的 @import 或字体路径容易 404；连 <link rel="stylesheet" href="css/style.css"> 都可能加载失败——不是你路径写错了，是协议本身不支持跨域资源读取。
- 哪怕只加一行
<script>fetch('/data.json')</script>，双击打开必报net::ERR_FAILED -
DOCTYPE前若有 BOM 或空格，会触发怪异模式（document.compatMode === "BackCompat"），盒模型、字体渲染全不可控 - Windows 自带记事本默认 ANSI 编码，中文直接乱码；WPS/Word 插入不可见格式字符，导致标签意外断裂
Live Server 插件怎么装和调用
它不是命令行工具，是 VS Code 内置图形化流程，所有操作在界面完成，不碰终端。
- 启动 VS Code → 左侧扩展图标（或
Ctrl+Shift+X）→ 搜索Live Server→ 安装作者为Ritwick Dey的那个 - 新建文件夹 → 新建
index.html→ 输入!+Tab（Emmet 触发）→ 自动生成标准 HTML5 结构 - 右键编辑器任意空白处 → 选
Open with Live Server→ 浏览器自动打开http://127.0.0.1:5500/index.html - 之后每次
Ctrl+S，页面秒级刷新，无需手动 F5
端口被占或中文路径打不开怎么办
Live Server 默认用 5500 端口，但 Windows 上 IIS、Docker Desktop、某些杀毒软件常悄悄占用；而路径含中文或空格（如 C:\Users\张三\Documents\my-site）会导致部分系统解析异常。
立即学习“前端免费学习笔记（深入）”；
- 改端口：按
Ctrl+Shift+P→ 输入Preferences: Open User Settings (JSON)→ 添加"liveServer.settings.port": 8080 - 路径问题：把项目移到纯英文路径下，例如
C:\dev\my-site，避开桌面、“文档”等系统重定向目录 - 仍打不开？右键
index.html→Copy Relative Path→ 粘贴到浏览器地址栏手动访问，确认是不是路径解析失败
真正卡住人的从来不是工具本身，而是 DOCTYPE 前那个看不见的 BOM、编辑器悄悄用了 GBK 编码、或者路径里混用了 \ 和 / ——这些细节不报错，但会让预览行为完全不可预测。
