Live Server 是 VS Code 中最常用、最稳定的本地预览方案，启动真实 HTTP 服务（http://localhost:5500）以绕过 file:// 协议跨域限制，支持 fetch、外部资源及模块导入；需安装扩展、打开已保存的 HTML 文件，右键选择 Open with Live Server 即可自动刷新，但子目录文件变更需手动保存主文件或启用 Full Reload 模式。
VS Code 中用 Live Server 启本地预览
Live Server 是最常用、最稳定的本地预览方案，它启动的是真正的 HTTP 服务（http://localhost:5500），能绕过 file:// 协议的跨域限制，适合含 fetch、XMLHttpRequest、外部 CSS/JS 文件或模块导入的页面。
实操要点：
- 在 VS Code 扩展市场搜索并安装
Live Server（作者：Ritwick Dey） - 确保当前打开的是一个真实存在的
.html文件（不是未保存的临时标签页） - 右键编辑器空白处或文件资源管理器中的文件 → 选择
Open with Live Server - 首次运行会自动在默认浏览器中打开
http://127.0.0.1:5500/xxx.html；后续保存即自动刷新 - 注意状态栏右下角会出现
Go Live按钮，点击可快速重启服务
容易踩的坑：Live Server 不会监听子目录下的资源变更（比如 css/style.css 修改后不触发刷新），需手动保存 HTML 主文件或启用插件设置中的 Full Reload 模式。
IntelliJ IDEA 中右键打开指定浏览器
IDEA 原生支持“一键预览”，无需额外插件，但依赖浏览器注册表项是否完整，尤其在 Windows 上 Edge/Chrome 重装后常失效。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 确保 HTML 文件已在项目中正确创建（非临时文件，且路径不含中文或空格）
- 在项目树或编辑器标签页上右键 →
Open in Browser→ 选具体浏览器（如Chrome） - 若下拉菜单中无浏览器选项，进入
Settings → Tools → Web Browsers and Preview，手动设置Custom Path（例如 Chrome 路径为C:\Program Files\Google\Chrome\Application\chrome.exe） - 该方式仍走
file://协议，加载本地fetch('./data.json')会直接报CORS error
性能影响：不启动服务，零延迟启动，但所有相对路径解析、AJAX、Service Worker 等功能受限，仅适合纯静态展示。
双击 HTML 文件失败时的排查顺序
看似最简单的方式，实际最容易因环境细节失败。重点不是“能不能点”，而是“为什么点不开”。
常见错误现象与对应检查项：
- 双击后弹出记事本或 VS Code → 右键 →
打开方式→ 选浏览器，并勾选“始终使用此应用打开 .html 文件” - 页面空白，地址栏显示
file:///C:/.../index.html但控制台报错Access to script at 'file:///...' from origin 'null' is blocked→ 这是file://协议禁止读取本地脚本，必须换 HTTP 服务 - 路径含中文或空格（如
C:\我的项目\test.html）→ 浏览器 URL 编码异常，导致 CSS/JS 404；应改用英文路径，如C:\my-project\test.html - 文件实际保存为
index.html.txt（Windows 隐藏已知扩展名）→ 在文件夹选项中开启“显示文件扩展名”，重命名删掉.txt
编码问题常被忽略：用记事本保存时若选“UTF-8”，默认带 BOM，可能导致 <script> 解析失败；务必用 VS Code 或 Sublime 保存为 UTF-8 without BOM。
用 Python 或 npx 快速起 HTTP 服务（无编辑器依赖）
当不使用 VS Code 或 IDEA，或需在终端快速验证时，命令行方式更可控，也便于 CI/CD 或团队统一环境。
推荐组合：
- Python 3 内置（无需安装）：
python -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户更推荐：
npx http-server -p 8080 -c-1（-c-1禁用缓存，避免调试时看到旧版本） - 二者都支持跨域、MIME 类型识别、目录索引，且不依赖 GUI 编辑器
注意：Python 的 http.server 默认不支持 history.pushState 回退（单页应用路由会 404），此时必须用 http-server 或配置代理。
真正麻烦的从来不是“怎么打开”，而是“为什么打开后 JS 不执行、图片不显示、接口 404”。根源几乎都指向协议（file:// vs http://）、路径解析、编码和浏览器安全策略——这些细节不处理，换十个编辑器也没用。
