首选右键“open with live server”插件,因其解决file://协议下ajax、esm模块等拦截问题;次选open in browser插件快速预览静态页;embeddedbrowser适合内嵌浏览外部网页;避免tasks.json自定义命令。

直接右键选“Open with Live Server”最稳
这是绝大多数前端开发者的首选,不是因为它最炫,而是它解决了本地 file:// 协议下 AJAX、ESM 模块、相对路径等被浏览器拦截的核心问题。纯双击打开 HTML 文件看似快,但一旦你写个 fetch('./data.json') 或引入 ./script.js,八成会看到控制台报 CORS error 或 net::ERR_FILE_NOT_FOUND。
实操建议:
- 安装官方
Live Server插件(作者:Ritwick Dey),别选名字相近的仿品 - 确保 HTML 文件已保存(
Ctrl+S),未保存的临时文件右键菜单里不显示该选项 - 右键后若没出现
Open with Live Server,检查是否在编辑器标签页中真正“聚焦”了该 HTML 文件(而非空标签或 settings.json) - 启动后地址栏是
http://127.0.0.1:5500/xxx.html,不是file:///—— 这才是关键区别
想免插件快速看效果?用 Open in Browser 插件配快捷键
适合静态页面初稿、纯展示型 HTML、或者临时查排版,不需要服务端逻辑或跨文件请求。它本质就是调用系统命令打开默认浏览器,快、轻、无依赖。
常见错误现象:
- 按
Alt+B没反应 → 插件没装,或快捷键被其他插件(比如 Vim 模式)劫持 - 点开是 IE 或 360 安全浏览器 → 没在插件设置里指定 Chrome/Edge,只改了系统默认浏览器不够
- 右键菜单里没有
Open in Default Browser→ 插件安装后需重启 VSCode 才完全激活
配置路径:Settings → Extensions → Open In Browser → Default Browser,选 chrome 或 edge,别选 system —— 这个值在 Windows 上常指向过时的旧引擎。
要在 VSCode 窗口里直接看网页?试试 EmbeddedBrowser
这不是预览你的 HTML,而是真正在编辑器里开一个带地址栏、前进后退、支持 HTTPS 的内嵌浏览器。适合边写代码边查 MDN、调试接口返回、比对设计稿源站。
纯css3网页相片鼠标悬停效果,鼠标悬停之后,图片的边框会逐层展开。支持ie9+,chrome,firefox浏览器。 使用方法: 1、head区域引用文件 lrtk.css 2、在文件中加入区域代码 3、复制images文件夹里的图片到相应的路径
为什么不用 Browser Preview 类插件?
- 那些插件靠 iframe 加载,遇到
X-Frame-Options: DENY(比如知乎、微信公众号页)直接白屏 -
EmbeddedBrowser用本地代理中转,绕过了 iframe 限制,能打开几乎所有公开网页 - 它不帮你跑本地 HTML —— 想预览自己的
index.html,仍得先用 Live Server 启服务,再在 EmbeddedBrowser 里输http://127.0.0.1:5500
命令是 Ctrl+Shift+P → Open Browser,第一次运行会自动拉起面板;关掉后下次还能从历史记录里找回上次的标签页。
别碰 tasks.json 自定义命令,除非你明确需要非标行为
网上很多教程教你在 .vscode/tasks.json 里写 start ${workspaceFolder}/index.html,这在 Windows 上可能生效,但在 macOS/Linux 下会失败(open 和 xdg-open 命令不同),且无法处理路径空格、中文名、多级子目录等问题。
更现实的问题:
- 任务执行后终端一闪而过,根本不知道成功没成功
- 浏览器可能复用旧标签页,导致你看到的是缓存页,不是最新修改
- 没有端口管理,多个项目同时运行容易端口冲突(虽然这个命令本身不占端口,但和 Live Server 混用时易误判)
如果你真要自动化,优先走插件 API 而不是 shell 命令 —— Live Server 和 Open in Browser 都提供了完整的命令注册,VSCode 调用更可靠。
最容易被忽略的一点:所有这些方式都依赖「当前活动文件」。如果你开了 10 个标签页,却在 CSS 文件上右键,那 Open with Live Server 启动的仍是那个 HTML——但浏览器里加载的可能是空页或 404。动手前,低头确认一下左上角标签页名是不是你要的 index.html。









