Live Server是最简单有效的HTML热重载方案，因其基于轻量Node.js服务、零配置、自动注入WebSocket实现实时刷新；安装后右键HTML文件选择“Open with Live Server”即可在http://127.0.0.1:5500/运行，默认端口5500可配置，不支持跨域但适合纯静态页。
VSCode 本身不内置 HTML 热重载（live reload），必须借助外部工具；直接按 F5 启动调试器只会打开浏览器但不会监听文件变化，改完 HTML 必须手动刷新——这是最常被误解的一点。
为什么 Live Server 插件是最简单有效的选择
它用一个轻量 Node.js 服务托管当前目录，自动注入 WebSocket 监听机制，在保存 HTML/CSS/JS 时触发浏览器刷新。相比自己搭 webpack-dev-server 或 vite，它零配置、无依赖、专为静态页优化。
- 安装后右键 HTML 文件 → “Open with Live Server”，地址类似
http://127.0.0.1:5500/index.html - 默认端口是
5500，可在 VSCode 设置中搜liveServer.settings.port修改 - 不支持跨域请求（如
fetch('/api')），纯前端静态页没问题，调后端接口需另配代理 - 多个 HTML 文件共存时，每个都可单独右键启动，端口会自动递增（
5500、5501…）
遇到 ERR_CONNECTION_REFUSED 或页面空白怎么办
这通常不是插件坏了，而是浏览器缓存了旧连接或端口被占。热重载失效的真正原因往往藏在底层通信链路里。
- 关闭所有已打开的
127.0.0.1:5500页面，再右键重启 Live Server - 检查是否开了其他占用
5500端口的程序（比如另一个 VSCode 窗口、Docker 容器），用命令lsof -i :5500（macOS/Linux）或netstat -ano | findstr :5500（Windows）查进程并 kill - 禁用浏览器扩展（尤其是广告拦截类），它们可能屏蔽了 Live Server 注入的
livereload.js - 确保 HTML 文件不是“未保存状态”——Live Server 只响应已保存的磁盘文件变更
想用更现代的方案？vite 是替代选项但有前提
vite 确实提供更快的 HMR（模块热更新），但它面向的是工程化项目：需要 package.json、依赖安装、命令行启动。如果你只是写单个 index.html + 几个 JS 文件，它反而增加负担。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：已有
npm init vite@latest初始化的项目，或准备加 TypeScript / Vue / React - 运行前必须执行
npm install和npm run dev，不能像 Live Server 那样点一下就跑 - 对纯 HTML 页面，
vite默认不启用 HMR，需手动在 JS 中加import.meta.hot.accept()或用vite-plugin-html插件 - 本地开发地址变成
http://localhost:5173/，路径别名和 base 配置会影响资源加载，容易出现 404
真正关键的细节是：热重载是否生效，取决于「文件是否真实写入磁盘」+「服务是否监听该路径」+「浏览器是否成功建立 WebSocket 连接」。三个环节断一个，就只能手动 F5——而大多数人只盯着浏览器看，忘了去终端看 Live Server 的日志输出，那里会明确打印 [LiveReload] connected 或报错原因。
