VSCode 的 Simple Browser 无法预览本地 HTML 文件，因其禁用 file:// 协议；推荐使用 Live Server 扩展启动本地 HTTP 服务实现自动刷新预览，或选用 Preview HTML 扩展通过 WebView 直接渲染（不依赖 HTTP，但不支持 AJAX/ES6 模块）。
VSCode 内置的 Simple Browser 扩展不能直接预览本地 HTML 文件，它只支持 http/https 协议，且不读取 file:// 路径 —— 这是绝大多数人卡住的第一步。
为什么 Simple Browser 打不开本地 index.html
这个扩展本质是个精简版 Chromium 容器，但故意禁用了 file:// 协议加载（出于安全限制），所以右键“Open in Simple Browser”对本地文件完全无效，只会显示空白页或报错 net::ERR_UNKNOWN_URL_SCHEME。
- 它只接受形如
https://example.com或http://localhost:3000的地址 - 不支持相对路径、
./index.html、../src/page.html等写法 - 无法读取本地 CSS/JS（即使 HTML 能硬塞进去，资源 404 是必然）
真正能用的替代方案：用 Live Server 扩展起本地 HTTP 服务
想在 VSCode 里点一下就预览 HTML，必须走 HTTP 协议。推荐安装官方维护的 Live Server 扩展（作者 Ritwick Dey），它会自动启动一个轻量服务器，并在默认浏览器或内置 WebView 中打开页面。
- 安装后，右键 HTML 文件 → “Open with Live Server”，会启动
http://127.0.0.1:5500/index.html并自动刷新 - 它支持热重载：保存 HTML/CSS/JS 后，页面自动更新，无需手动刷新
- 端口可配置：在 VSCode 设置里搜
liveServer.settings.port，改为你想要的值（比如3000） - 注意：不要和本地已占端口（如
create-react-app的3000）冲突，否则启动失败并报错Address already in use
如果坚持要用内置 WebView（非 Simple Browser），试试 Preview HTML 扩展
VSCode 自带的 Webview API 可被第三方扩展调用。Preview HTML（作者 tht13）就是个更靠谱的选择：它不依赖外部协议，直接把当前 HTML 文件内容注入 WebView 渲染，支持内联样式、script 标签和相对路径引用（只要路径在工作区根目录下）。
- 安装后，右键 HTML 文件 → “Preview HTML”（或按快捷键
Ctrl+Shift+V） - 它不会起服务，所以不能测试 AJAX 请求、
fetch或跨域逻辑 - 不支持 ES6 模块（
import）、localStorage在某些场景下行为异常 - 路径解析以 VSCode 工作区根目录为基准，比如
src/css/style.css必须相对于打开的工作区，不是相对于 HTML 文件所在目录
最常被忽略的一点：没有“一键开浏览器”的银弹。Simple Browser 是假目标，Live Server 是真解法，Preview HTML 是折中方案 —— 选哪个，取决于你是在调试静态结构，还是需要真实 HTTP 环境。别在 file:// 上死磕。
