VSCode如何查看运行代码html的效果？浏览器预览操作步骤-VSCode-PHP中文网

vscode 1.121+ 内置 integrated browser 可直接预览已保存的 html 文件，无需插件、基于 chromium、同屏显示且自动刷新；但受限于 file:// 协议，不支持 fetch、import、localstorage 等需 http 环境的功能，真实开发仍须用 live server 启本地服务器。

vscode如何查看运行代码html的效果？浏览器预览操作步骤

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 换一个数字即可。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

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 全部不可用