Live Server是VSCode最稳的HTML实时预览方案，它启动本地HTTP服务（如http://127.0.0.1:5500）绕过file://协议限制，支持fetch、import、相对路径等，保存即刷新；必须安装Ritwick Dey原版插件、以文件夹方式打开项目、右键HTML文件选择“Open with Live Server”。
VSCode 里写 HTML，想实时看到效果，别双击打开、也别手动刷新——直接用 Live Server 插件，这是目前最稳、最省心的本地预览方案。
为什么不能直接双击打开 HTML 文件？
双击用浏览器打开 file:// 协议的 HTML 文件，会触发跨域限制：所有 fetch、XMLHttpRequest、import、甚至某些 localStorage 行为都会被浏览器拦截。哪怕你只写了 <script src="data.js"></script>，也会报 CORS policy: No 'Access-Control-Allow-Origin' header 错误。
常见表现：
- CSS/JS 文件加载失败，控制台报
net::ERR_FILE_NOT_FOUND或blocked by CORS policy - 本地 JSON 数据读取失败
- ES Module 导入语法（
import）直接报错
Live Server 是怎么工作的？
Live Server 本质是启动一个轻量级本地 HTTP 服务器（基于 connect + chokidar），把当前文件夹作为根目录，服务地址类似 http://127.0.0.1:5500/index.html。它不是“模拟浏览器”，而是真实复现生产环境的协议和权限模型。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键行为：
- 自动监听文件保存事件，触发浏览器刷新（可关）
- 支持
localhost下所有 Web API（fetch、WebSocket、Service Worker注册等） - 默认端口 5500，冲突时自动递增（5501、5502…）
- 右键菜单项叫
Open with Live Server，不是Preview或Run
不装插件，纯 JS 能否实现 iframe 实时预览？
可以，但仅限静态内容。核心是利用 iframe.srcdoc 属性动态注入 HTML 字符串：
const html = document.getElementById('html-editor').value;
const css = `<style>${document.getElementById('css-editor').value}</style>`;
const js = `<script>${document.getElementById('js-editor').value}<\/script>`;
previewFrame.srcdoc = html.replace('</head>', `${css}</head>`).replace('</body>', `${js}</body>`);
注意陷阱：
-
srcdoc不支持外部资源（<link rel="stylesheet">、<script src>会被忽略） - 内联脚本执行受 CSP 限制，部分浏览器会静默屏蔽
<script>标签 - 无法调试：iframe 内的 console.log 不出现在主页面开发者工具中
- 无网络上下文，
fetch('/api')会请求到主页面域名下，而非你期望的后端地址
什么时候该换别的方案？
如果你的 HTML 需要：
- 调用本地后端接口（如
fetch('/user')）→ 必须用Live Server或自建express/vite服务 - 加载第三方 CDN 脚本（如
https://unpkg.com/react@18）→srcdoc可以，但需确保目标 CDN 允许frame-ancestors（否则白屏） - 多文件协作（HTML/CSS/JS 分离且互相引用）→
Live Server是唯一推荐选项
真正容易被忽略的是：即使只是改一行 CSS，只要用了相对路径引入资源，file:// 就不可靠；而 Live Server 的根路径永远是你右键的文件所在文件夹，这点必须记牢。
