VSCode 1.121+ 内置 Integrated Browser 可直接预览已保存的 HTML 文件，无需插件、基于 Chromium、同屏显示且自动刷新；但受限于 file:// 协议，不支持 fetch、import、localStorage 等需 HTTP 环境的功能，真实开发仍须用 Live Server 启本地服务器。
VSCode 内置 Integrated Browser 预览 HTML（1.121+）
VSCode 从 1.121 版本起已原生支持 HTML 预览，无需插件、不走 file:// 协议、自动监听保存并刷新。它不是 iframe 嵌入，而是基于 Chromium 的精简集成浏览器，共享编辑器的文件监听、暗黑主题和代理配置。
触发方式有三种，任一即可：
- 在资源管理器中右键 HTML 文件 → 选择
Open in Integrated Browser - 已打开 HTML 文件时，右键编辑器标签页 → 同样选
Open in Integrated Browser - 激活 HTML 文件后，点击编辑器右上角那个半透明的
?️图标
注意：该功能仅对已保存的 .html 或 .htm 文件生效；未保存的临时标签页不会显示图标或右键选项。
Live Server 是唯一能跑真实 Web 环境的方案
如果你的 HTML 里用了 fetch()、import、localStorage、相对路径的 JSON/CSS/JS，或者要调试 Service Worker，Integrated Browser 和 Open in Default Browser 都会失败——它们仍受限于浏览器对 file:// 的安全策略。
立即学习“前端免费学习笔记（深入）”；
必须用 Live Server（作者 ritwickdey.LiveServer）启动本地 HTTP 服务：
- 通过
文件 → 打开文件夹加载整个项目（单个 HTML 拖入不生效） - 右键 HTML 文件 →
Open with Live Server（比点状态栏Go Live更可靠） - 首次运行后，地址类似
http://127.0.0.1:5500/index.html，所有资源路径以该 HTML 文件所在目录为基准
端口被占？点 VSCode 右下角显示的端口号 → Change Port 换一个数字即可。
Preview HTML 和 Live Preview 的本质区别
Preview HTML（第三方扩展）和 Live Preview（微软官方，ID ms-vscode.live-preview）都只做静态解析，不启服务器：
-
Preview HTML：命令面板执行Preview HTML，在内置面板渲染，不执行 JS，不加载外部资源，适合看结构和基础样式 -
Live Preview：支持热更新（约 300ms 延迟），但同样不执行 JS、不处理跨域、不支持模块导入；只识别已保存的.html/.htm，对软链接、WSL、网络盘路径变更无响应
两者都不解决 fetch('./data.json') 报错、<script type="module"></script> 失败、CSS 路径 404 这类问题——它们只是“画出来”，不是“跑起来”。
为什么 Open in Default Browser 总是出问题？
VSCode 内置的 Open in Default Browser 命令，底层就是模拟双击打开文件，协议仍是 file://。这意味着：
-
fetch('./config.json')→ 控制台报Not allowed to load local resource -
<script type="module" src="./main.js"></script>→Failed to load module script - 路径
../assets/style.css极大概率 404（浏览器对file://的路径解析松散且不一致） -
localStorage、Service Worker、WebSockets全部不可用
这不是你代码写错了，是浏览器主动拒绝——这是设计使然，不是 bug，也改不了。
真正需要验证交互逻辑、AJAX 行为、模块加载或响应式效果时，别省那几秒，老实用 Live Server。集成预览再快，也只是“看起来像”，不是“跑起来像”。
