用 live server 实时预览 html 最省心，它启动带自动刷新的本地 http 服务器，右键 html 文件选“open with live server”或点右下角 go live 即可，保存即刷新，但需确保文件为 .html、路径无中文或空格。
用 Live Server 实时预览 HTML 最省心
绝大多数前端初学者和日常开发，直接用 Live Server 就够了——它不只是“打开”，而是启动一个带自动刷新的本地 HTTP 服务器。
安装后右键你的 index.html，选 Open with Live Server，或者点 VS Code 窗口右下角的 Go Live 按钮。浏览器会立刻打开 http://127.0.0.1:5500/（端口可能不同），而且你每次 Ctrl+S 保存，页面就自动刷新。
- 必须是
.html文件，纯.txt或没后缀的文件不识别 - 路径里不能有中文或空格，否则可能报
ERR_CONNECTION_REFUSED - 如果默认打开了 Edge 而不是 Chrome，进设置搜
liveServer.settings.CustomBrowser，改成"chrome" - 别在文件夹外双击 HTML 打开——那是直接走
file://协议，很多 JS/CSS 功能（比如fetch、模块导入）会因跨域被浏览器拦截
用 open-in-browser 插件快速尝鲜，但别依赖它
如果你只是想秒开看一眼结构、样式，open-in-browser 这类插件确实快：装完右键 → Open in Default Browser，或按 Alt+B，立刻用系统默认浏览器打开 file:// 路径。
但它本质是调用系统命令打开本地文件，没有服务器环境，所以：
-
XMLHttpRequest、fetch('./data.json')会直接失败，报CORS error - ES 模块（
import）在 Chrome 里会被拒绝，提示Not allowed to load local resource - 想换浏览器？用
Alt+Shift+B，选chrome或firefox，但依然逃不开file://的限制
终端起 http-server：适合多文件或需要自定义端口
当你有多个 HTML、CSS、JS 文件，或者需要固定端口（比如对接某个调试工具），用命令行起服务更可控。
先全局装：npm install -g http-server；然后在项目根目录打开 VS Code 内置终端，运行：http-server -p 8080。浏览器访问 http://localhost:8080 即可。
- 加
-c-1参数禁用缓存，避免改了 CSS 看不到效果：http-server -p 8080 -c-1 - 如果项目里有
index.html，它会自动作为首页；没有的话，会列出所有文件供点击 - 注意 Node.js 版本——
http-server在 Node 20+ 下基本没问题，但某些旧插件（如serve）已停止维护，别踩坑
为什么不能直接双击 HTML 文件？
因为现代浏览器对 file:// 协议做了严格限制，不是“打不开”，而是“故意不让你用”。例如：
-
localStorage在部分浏览器中不可用（Safari 更激进） -
fetch请求本地 JSON 会触发net::ERR_FAILED - 图片
src用相对路径，在双击打开时可能解析为file:///C:/xxx/xxx.jpg，而 Live Server 解析为http://localhost:5500/xxx.jpg，路径语义完全不同
这个区别看起来小，但实际调试时卡住一小时找不到原因，八成是因为忘了启服务。
