VS Code需安装Open in Browser插件实现右键在浏览器打开HTML文件,支持默认/其他浏览器、快捷键及多浏览器切换,仅对已保存的.html文件生效,且依赖系统默认浏览器设置。

VS Code 右键直接在浏览器打开 HTML 文件
VS Code 默认不提供“右键 → 在浏览器中打开”功能,必须靠插件或手动配置。最常用、最稳定的方式是安装 Open in Browser 插件(作者:techer),它支持右键菜单、快捷键、多浏览器切换,且不依赖本地服务器。
- 安装后重启 VS Code,右键任意
.html文件,会出现 “Open in Default Browser” 和 “Open in Other Browser” 两个选项 - 首次使用
Open in Other Browser时会弹出浏览器选择列表(Chrome、Edge、Firefox 等),选中后即记住偏好 - 不推荐用
Live Server插件来“替代”这个需求——它会启动本地服务(http://127.0.0.1:5500/xxx.html),而原生文件协议(file:///)路径更轻量,适合静态页面快速预览 - 如果右键没出现菜单,请检查插件是否已启用,并确认当前文件后缀确实是
.html(大小写敏感,.HTML不触发)
快捷键比右键更快:Ctrl+Shift+P → “Open in Browser”
很多人装了插件却只记得右键,其实命令面板调用更快、更可控,尤其适合键盘党。
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入Open in Default Browser,回车即开 - 可自定义快捷键:打开
Preferences: Open Keyboard Shortcuts,搜索该命令,右键“添加快捷键”,比如设为Alt+B - 注意:该命令仅对已保存的文件生效;未保存的临时文件(如
Untitled-1)右键和快捷键均无效
为什么不用“Preview HTML”或内置预览?
VS Code 自带的 HTML Preview(右键 → “Preview HTML”)本质是内嵌 WebView,它不等价于真实浏览器环境——缺少 DevTools、不支持 fetch 本地文件、CORS 行为异常、localStorage 不可用。
- 典型报错:
Failed to load resource: net::ERR_FILE_NOT_FOUND(用fetch('./data.json')时) - 调试 JS 时发现断点不命中、
console.log不输出,大概率是因为用了预览而非真实浏览器 - 结论:开发阶段务必用真实浏览器打开;预览仅适合快速看个结构或样式草稿
Mac 上 Chrome 打不开?检查默认浏览器设置
即使插件正常,Mac 用户常遇到点击无反应,根本原因是系统级默认浏览器未设为 Chrome(哪怕你天天用 Chrome)。
- 进
System Settings → Desktop & Dock → Default Web Browser,手动选中Google Chrome - VS Code 的
Open in Browser插件完全依赖系统默认设置,不会自己硬拉起 Chrome 进程 - 验证方式:在 Finder 中双击任意
.html文件,看是否用 Chrome 打开;如果不是,插件也做不到










