Live Preview 仅在 VSCode 内置 WebView 中渲染静态 HTML/CSS，不执行 JS、不发请求、不支持模块导入；适合验证结构样式，但需已保存 UTF-8 文件且禁用 ES Module。
VSCode 本身不渲染 HTML，所谓“在编辑器中实时预览”，只有 Live Preview 插件能做到——它不是开浏览器，而是在 VSCode 内置 WebView 里解析并展示 HTML/CSS，但不执行 JS、不发请求、不支持模块导入。
Live Preview 能做什么、不能做什么
它适合纯静态页面快速验证结构和样式，比如写完一段 HTML+内联 CSS，想立刻看布局是否对齐、响应式断点是否生效。但它不会加载外部资源：fetch() 报错、<script type="module"> 直接失败、./data.json 404 是常态。如果你的 HTML 里有 <script src="app.js">，只要 app.js 里写了 console.log 或调了 document.querySelector，预览面板就只显示空白或报错。
- ✅ 支持已保存的
.html、.htm、.css、.md文件 - ✅ 修改后约 300ms 自动刷新（不需手动点按钮）
- ❌ 不监听软链接目录、WSL 或网络盘路径下的变更
- ❌ 不支持
localStorage、Service Worker、WebSocket - ❌ 所有相对路径按文件物理位置解析，但不走 HTTP 协议，所以跨目录
../引用可能失败
为什么点开 Live Preview 是白屏或报错
这不是插件坏了，而是三个硬性前提没满足：
- 文件必须已保存：临时标签页（如
Untitled-1）不触发预览 - 文件编码必须是 UTF-8：含中文路径或 GBK 编码时，
<link rel="stylesheet">会因net::ERR_INVALID_RESPONSE失败 - 不能用 ES Module 语法：删掉
<script type="module">，改用<script src="main.js">并确保该 JS 文件已保存且与 HTML 同目录
Live Preview 和 Live Server 能否共存
可以，而且推荐分场景使用：
立即学习“前端免费学习笔记（深入）”；
- 写 Markdown 或调试 CSS 布局 → 用
Live Preview：点右上角眼睛图标，预览面板固定在侧边栏，缩放/设备模拟都可用 - 验证 JS 交互、API 请求、动态渲染 → 必须切到
Live Server：右键 HTML 文件 →Open with Live Server，地址变成http://127.0.0.1:5500/xxx.html - 两者同时启用时，
Live Preview不会干扰Live Server的端口或服务，但别指望它能帮你看到console.log输出或 Network 请求
真正容易被忽略的是：Live Preview 的“实时”仅限于渲染层，它不启动任何服务，也不注入 WebSocket；而你一旦需要哪怕一行 fetch 或一个 import，就必须切换到 Live Server —— 这不是功能缺陷，是协议层级的不可逾越。
