Live Server预览失败主因是文件未保存为.html、未在文件夹工作区打开、或浏览器拦截；F12可快速编辑HTML片段但不支持跨域脚本；在线工具如CodePen环境受限；srcdoc方案轻量但需内联资源。
不用装环境、不配服务器，也能实时看到 HTML 效果——关键不是“能不能”，而是“选哪条路最省事、最稳”。
Live Server 插件在 VSCode 里打不开预览？检查这三件事
很多人右键点 Open with Live Server 没反应，或者浏览器打开空白页，根本不是插件坏了，而是卡在基础路径上：
- HTML 文件必须保存为
.html后缀，且不能是未命名的临时文件（如Untitled-1） - 文件必须位于一个**文件夹工作区**内——单独拖一个 .html 文件进 VSCode，
Live Server不会激活 - 首次启动时若提示
Server is started at port : 5500，说明服务已运行，但浏览器可能被拦截或弹窗被禁用，手动访问http://127.0.0.1:5500/your-file.html就能确认是否真失败
用浏览器开发者工具快速预览 HTML 片段，但别信“全功能”
按 F12 → 切到 Elements 面板 → 右键任意元素 → Edit as HTML，粘贴一段完整 HTML（含 结构），浏览器会立即重绘。这招适合验证小结构、样式或事件绑定，但有硬限制：
- 无法执行跨域脚本（比如从 CDN 加载的
jQuery或Vue） -
<link rel="stylesheet">和<script src></script>路径默认相对当前页面，不是你粘贴内容的上下文 - 刷新后代码就丢，不适合多步调试；想保留就得复制回编辑器再存盘
在线工具能跑 AI 生成的 HTML，但注意 DOM 环境差异
像 CodePen、JSFiddle、WebPen 这类平台，粘贴 AI 输出的带 <script></script> 的 HTML，点运行就能看效果。但实际运行环境和本地不同：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
-
WebPen允许直接运行含fetch或localStorage的代码，但它的 iframe 是沙盒化的，top.location、window.open会被静默拦截 -
CodePen默认把 JS 放在onload里执行，如果你写的是DOMContentLoaded监听，得手动改设置（Settings → JavaScript → Load Type → No wrap - in） - 所有在线工具对
file://协议资源（比如本地图片路径./img/logo.png）一律 404，必须转成 base64 或上传图床
自己写一个最小可运行预览页，srcdoc 是核心
如果不想依赖外部服务，又嫌插件太重，可以用一个单 HTML 文件实现双向预览——原理就是利用 <iframe></iframe> 的 srcdoc 属性直接注入 HTML 字符串：
<textarea id="editor"><h1>Hello</h1><button onclick="alert(1)">Click</button></textarea>
<iframe id="preview" srcdoc=""></iframe>
<script>
const e = document.getElementById('editor');
const p = document.getElementById('preview');
e.addEventListener('input', () => p.srcdoc = e.value);
</script>这个方案轻量、离线可用，但注意：srcdoc 不支持外部 CSS/JS 文件加载，所有依赖必须内联；另外 Safari 对长文本 srcdoc 渲染有延迟，输入快了会卡一帧。
真正麻烦的从来不是“怎么预览”，而是预览时发现样式错位、脚本不执行、资源 404 ——这些往往暴露的是 HTML 结构不完整、路径写死、或环境假设错误。先确保你能看清自己写的到底算不算一个“可独立运行的 HTML 文档”，再选工具才不踩坑。
