simple browser 无法预览本地 html 文件,因其明确禁用 file:// 协议,仅支持 http/https 完整 url(如 http://localhost:5500/index.html),输入相对路径或绝对 file:// 地址均无效;必须先启动本地 http 服务(如 live server 或 python3 -m http.server)再将生成的 url 粘贴至 simple browser 中查看。

Simple Browser 在 VSCode 里根本不能预览本地 HTML 文件——它压根不支持 file:// 协议,点右键“Open in Simple Browser”只会白屏或报错 net::ERR_UNKNOWN_URL_SCHEME。
Simple Browser 只认 http/https,不认 ./index.html
这个扩展本质是精简版 Chromium 容器,但明确禁用了本地文件协议。它只接受完整 URL,比如:
-
http://localhost:5500/index.html(Live Server 启的服务) -
https://example.com(外网地址) -
http://127.0.0.1:6006/(如 TensorBoard 页面)
你输入 ./index.html、index.html、甚至绝对路径 file:///Users/name/project/index.html,全部无效。命令面板里执行 Simple Browser: Show 后,输错格式就直接卡住,没提示、没日志、不报错——只显示空白页。
想用 Simple Browser,必须先起一个本地 HTTP 服务
它不是“开箱即用”的预览工具,而是个纯协议客户端。常见可行路径:
- 装
Live Server扩展 → 右键 HTML 文件 →Open with Live Server→ 复制地址栏里的http://127.0.0.1:5500/xxx.html→ 粘贴进Simple Browser: Show输入框 - 终端手动起服务:
python3 -m http.server 8000或http-server -p 8000→ 访问http://localhost:8000→ 再喂给 Simple Browser - 开发中已有后端(如
create-react-app),直接填http://localhost:3000
注意:端口冲突会导致服务启动失败,错误信息是 Address already in use,得去设置里改 liveServer.settings.port 或换命令行端口。
Simple Browser 和 Browser Preview 的关键区别
别把两者混用。Simple Browser 是只读查看器,无调试、无控制台、无网络面板;Browser Preview 才是真正嵌入 Chromium 的可调试环境:
-
Simple Browser:轻量、快、适合查页面快照,但连 F12 都打不开 -
Browser Preview:需配置 Chrome 路径,支持Debugger for Chrome、断点、launch.json调试,能模拟设备尺寸 - 两者都不解决“双击 HTML 直接预览”需求——VS Code 本身就没有那个能力,WebView 渲染的
Open Preview不执行 JS 模块、不走 fetch、不支持localStorage完整行为
最常被忽略的一点:所有“内嵌预览”的可靠性,取决于你是否让资源走 HTTP。哪怕只是写个 demo HTML + import 一个 JS 模块,file:// 下必挂,net::ERR_FAILED 或 Failed to load module 不是插件问题,是浏览器安全模型铁律。











