Live Server是最稳的HTML预览方案，它通过启动本地HTTP服务器（如http://127.0.0.1:5500/）解决file://协议导致的fetch、模块导入等限制，支持自动刷新；而VSCode内置预览和Open in Default Browser因使用file://协议，无法运行现代Web功能。
Live Server 是最稳的选择，别被“内置预览”带偏
VSCode 本身不运行 HTML，所谓“实时预览”本质是起一个本地 HTTP 服务器（http://127.0.0.1:5500/），不是用 file:// 协议双击打开。后者在现代浏览器里会直接禁掉 fetch、import、相对路径资源加载，报错如 net::ERR_FILE_NOT_FOUND 或 CORS policy: file:// URLs are not allowed——你页面白屏或控制台一堆红字，八成就是栽在这儿。
Live Server 插件由 Ritwick Dey 开发，轻量、可靠、自动刷新，改完 Ctrl+S，浏览器 100–300ms 内就更新，不用切窗口、不用按 F5。
- 安装：扩展市场搜
Live Server→ 点安装 → 不用重启 - 启动：右键任意已保存的
.html文件 → 选Open with Live Server - 验证：地址栏看到的是
http://127.0.0.1:5500/xxx.html，不是file:///C:/... - 端口冲突？去 VSCode 设置里搜
liveServer.settings.port改成别的，比如3000
Live Preview 插件适合快速看样式，但不解决 H5 功能调试
微软官方的 Live Preview 插件确实能点一下右上角眼睛图标就出预览窗，不启服务、不占端口、支持 .css 和 .md，看起来很美。但它本质是 VSCode 自己解析 HTML 渲染的“快照”，不走真实浏览器引擎，也不加载外部 JS、不执行 fetch、不处理模块导入——你写个 <script type="module">import {foo} from './utils.js'</script>，它直接静默失败。
所以它只适合：纯静态结构检查、CSS 布局微调、Markdown 预览。真要测 H5 的 API 调用、路由跳转、Canvas 渲染、WebSocket 连接？必须用 Live Server 或其他 HTTP 服务。
- 装了也无害，但别指望它跑通你的
Vue组件或localStorage操作 - 预览窗拖进侧边栏可固定，适合边写 CSS 边盯效果，但别把它当“真浏览器”
- 如果右上角没眼睛图标，确认文件已保存、扩展名是
.html，且没被其他插件拦截
别碰 Open in Default Browser，除非你确定页面完全静态
这个命令（或类似插件如 View in Browser）只是把文件路径转成 file:// URL 丢给系统默认浏览器。它快、零配置，但代价是彻底放弃现代 Web 特性支持。
典型翻车场景：<img src="./assets/logo.png" alt="vscode怎么实时预览h5界面" > 加载失败；fetch('/api/user') 报 CORS 错；ES6 模块提示 Failed to load module script；XMLHttpRequest 直接被拦截。这些不是你代码写错了，是浏览器策略铁律。
- 仅适用于：单页 HTML + 内联 CSS/JS + 所有资源都用绝对 URL 或 base64
- 想临时验证排版？可以一试；想调试登录态、表单提交、图片上传？立刻切回 Live Server
- 如果右键没这个选项，别硬装插件补——说明你已经踩进
file://陷阱了
Python 或 npx serve 是备选，但没必要为 H5 小项目折腾
如果你不能装插件（比如公司锁死 VSCode 扩展），或者想更透明地控制服务行为，可以用命令行快速起服务：
- 有 Python 3.6+？终端进项目目录，执行
python -m http.server 8000，然后手动打开http://localhost:8000/index.html - 有 Node.js？
npx serve -s（需先npm install -g serve），或npx http-server -p 8080 - 问题在于：每次都要切终端、记端口、手输 URL，没法和保存动作联动，也没法自动刷新
Live Server 已经把这件事做得足够轻、足够稳。除非你在调试服务端逻辑，否则真没必要绕开它去折腾命令行。
真正卡住人的，从来不是“怎么打开”，而是没意识到 file:// 和 http:// 是两个世界。只要 URL 里没出现 http，你就还没真正开始调试 H5。
