Sublime Text安装Open-in-Browser快速调用各种浏览器

P粉328763957

P粉328763957

2026-07-26

841人浏览

原创

优先选 view in browser,因其内置 http 服务(如 http://localhost:8080),绕过 file:// 协议的安全限制,支持自定义端口、根路径与浏览器;而 sidebarenhancements 依赖 file://,导致 js/css 加载失败。

sublime text安装open-in-browser快速调用各种浏览器

直接装 View in Browser,别用 SideBarEnhancements 附带的预览功能——后者在本地 file:// 协议下大概率打不开 JS/CSS,且不支持自定义端口或服务器代理。

为什么优先选 View in Browser 而不是 SideBarEnhancements

SideBarEnhancementsside_bar_files_open_with 命令本质是调用系统命令行打开文件,走的是 file:// 协议。现代浏览器(Chrome、Edge、Firefox)默认禁用该协议下的跨域请求和部分 API(如 fetchlocalStorage),导致本地 HTML + JS 项目直接白屏或报错 net::ERR_FILE_NOT_FOUNDSecurityError

View in Browser 则内置了轻量 HTTP 服务选项(可配端口、根路径、自动刷新),默认用 http://localhost:8080/xxx.html 打开,绕过所有安全限制。

  • 它支持快捷键:Alt+Shift+O(Windows/Linux)或 Cmd+Shift+O(macOS)
  • 右键菜单里有 “Open in Browser” 子项,点开可选 Chrome/Firefox/Safari 等已注册浏览器
  • 配置文件 View In Browser.sublime-settings 可设 "port": 3000"server_root": "./dist"

安装 View in Browser 的实操步骤

前提是已装 Package Control(没装就先 Ctrl+Shift+P → 输入 Install Package Control 回车)。

  • Ctrl+Shift+P 打开命令面板,输入 pcipPackage Control: Install Package
  • 等待列表加载完成,输入 View in Browser,回车安装
  • 安装成功后,左下角状态栏会短暂显示 View in Browser installed
  • 不用重启 Sublime,立刻可用快捷键或右键测试

如果按 Alt+Shift+O 没反应,检查是否被输入法或远程桌面软件劫持了组合键;也可手动进 Preferences → Package Settings → View in Browser → Settings 看 JSON 是否语法错误(缺逗号、多逗号、单引号)。

Comet AI 浏览器
Comet AI 浏览器

下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

自定义快捷键打开指定浏览器

默认快捷键只打开系统默认浏览器。想一键用 Chrome 打开、另一键用 Firefox,得改用户按键绑定。

打开 Preferences → Key Bindings – User,粘贴类似下面的结构(注意 JSON 格式,末尾不能有多余逗号):

[
  {
    "keys": ["f1"],
    "command": "view_in_browser",
    "args": {"browser": "chrome"}
  },
  {
    "keys": ["f2"],
    "command": "view_in_browser",
    "args": {"browser": "firefox"}
  }
]
  • "browser" 值必须是小写,且为系统已识别的浏览器名(chromefirefoxsafariedge
  • Windows 下若 Chrome 未注册为默认 handler,可能需先运行一次 Chrome 并设为默认,或手动加 "path" 参数指向 C:\Program Files\Google\Chrome\Application\chrome.exe
  • macOS 下路径一般不用填,系统能自动发现;Linux 需确认 google-chromefirefox$PATH

本地开发时真正要关心的其实是服务模式

即使你用 View in Browser 打开了页面,如果 HTML 里引用了 ./script.js 或调用了 fetch("./data.json"),而你只是双击 HTML 文件或用 file:// 打开,它依然会失败。

这时必须启用插件的 HTTP 服务模式(默认开启):

  • 它会在后台起一个 Python 或 Node 小服务,监听 localhost:8080
  • 所有资源都走 HTTP,不再受浏览器沙箱限制
  • 修改文件保存后,配合 LiveReload 插件还能自动刷新(需额外配置)
  • 如果端口被占,改配置里的 "port" 即可,比如设成 30005000

容易被忽略的一点:插件默认把当前文件所在目录作为 Web 根目录,但如果你的 HTML 在 src/index.html,而 JS 在 dist/main.js,就得在设置里配 "server_root": "./dist",否则路径 404。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
li是什么元素
li是什么元素

li是HTML标记语言中的一个元素,用于创建列表。li代表列表项,它是ul或ol的子元素,li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。

2023.08.03

596

5

墨刀AI提示词教学
墨刀AI提示词教学

本合集由PHP中文网精心整理,为您提供全面的墨刀AI提示词教学。内容涵盖高质量原型撰写公式与实操窍门,助您轻松掌握AI设计工具。无论是零基础入门还是进阶技巧,都能让您快速上手,大幅提升产品设计与协作效率。

2026.08.04

8

21

墨刀AI完整入门
墨刀AI完整入门

PHP中文网为您倾力打造墨刀AI保姆级入门指南完整版!本合集从零基础讲起,涵盖AI生成原型、提示词优化、图片转原型及多轮对话等核心功能。无论您是新手还是进阶用户,都能轻松掌握产品设计全流程。快来PHP中文网,一键解锁高效设计技巧,让想法即刻成型!

2026.08.04

6

20

墨刀AI进阶技巧
墨刀AI进阶技巧

本合集由PHP中文网精心整理,为您提供墨刀AI核心进阶策略指南。内容涵盖高效提示词写作、原型智能生成与微调、结构化导图制作及行业分析报告输出等实战技巧。助您轻松掌握AI设计工具,大幅提升产品设计与团队协作效率。

2026.08.04

8

14

火山引擎实名认证失败怎么办
火山引擎实名认证失败怎么办

火山引擎实名认证失败可能与证件信息填写错误、姓名或企业信息不一致、证件照片不清晰、营业执照状态异常、手机号验证失败或审核资料不完整有关。本专题整理个人认证、企业认证、资料上传、审核退回、重新提交和认证不通过的常见处理方法。

2026.08.04

4

10

火山引擎域名备案流程详解
火山引擎域名备案流程详解

火山引擎域名备案适合需要在火山引擎云服务器、对象存储、CDN或网站服务上绑定域名的用户参考。本专题整理备案入口、账号实名认证、备案类型选择、主体信息填写、网站信息提交、资料上传、初审核验、管局审核和备案失败排查,帮助用户完成网站上线前的备案流程。

2026.08.04

0

10

火山引擎DNS解析配置步骤
火山引擎DNS解析配置步骤

使用火山引擎DNS解析网站域名时,需要确认域名已完成管理接入,并正确配置服务器IP、CNAME地址或验证记录。本专题整理域名添加、记录类型选择、TTL设置、解析状态检查、备案和访问测试等流程,适合新手搭建网站时参考。

2026.08.04

3

10

火山引擎对象存储使用教程
火山引擎对象存储使用教程

火山引擎对象存储适合用于网站图片、视频文件、备份数据、静态资源和应用附件管理。本专题整理TOS控制台入口、存储桶创建、地域选择、权限设置、文件上传、访问链接生成、CDN加速、费用查看和常见上传或访问失败问题,帮助用户快速掌握对象存储基础操作。

2026.08.04

1

10

火山引擎云服务器使用教程
火山引擎云服务器使用教程

火山引擎云服务器使用教程适合第一次购买、部署和管理云服务器的用户参考。本专题整理控制台入口、实例创建、地域和配置选择、系统镜像设置、安全组放行、远程连接、网站部署、续费计费和常见连接失败问题,帮助用户快速完成云服务器基础使用流程。

2026.08.04

5

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程