关于css:自动区分不同的开发环境我做了一个Chrome插件

30次阅读

共计 770 个字符,预计需要花费 2 分钟才能阅读完成。

不晓得大家有没有碰到这样的问题:很多时候一个我的项目会存在多个环境,当浏览器标签页比拟多的时候就齐全分不清了

其实这里是有 3 个开发环境的

然而独自从 favicon 是没法疾速辨别哪个跟哪个的,为此,我做了一个 Chrome 插件能够很不便的解决这个问题,成果如下

是不是十分清晰呢?

装置和应用

在 Chrome 网上商店 间接搜寻 “auto dev favicon”,或者间接拜访这个链接 https://chrome.google.com/webstore/detail/auto-dev-favicon/obgfnmomampmgjefiodpcknepcecgijg,如下

胜利装置后,须要进入到 配置页,也就是能够自定义匹配域名的页面,有 3 个入口

  1. 间接点击右上角插件图标(举荐)
  2. 右键右上角插件图标,点击“选项”
  3. 进入插件详情页,点击“扩大程序选项”

上面就是一个简略的配置页面

这里简略阐明一下

  1. 色彩 是指小标签的背景色,这里预置了 8 种颜色可供选择
  2. 名称 是指小标签的文本内容,因为宽度无限,最多反对两个中文字符或 3 个英文字符
  3. 匹配 是指域名匹配,这里仅匹配 hostname,匹配规定是“模式匹配”,用英文逗号分隔能够填写多个,比方这里的 dev* 示意匹配所有以 dev 结尾的域名,具体规定可参考 URL_Pattern_API
  4. 操作实现之后记得点击一下保留,会主动同步到 Chrome 账号

其余阐明

如果因为网络环境暂不可拜访利用商店,能够在 github 获取源文件,通过开发者模式装置即可

https://github.com/XboxYan/auto-dev-favicon-chrome-plugin

或者装置 Edge 外接程序 Microsoft Edge Addons,益处是对网络条件比拟敌对

有任何问题或者意见能够提 issue 或者与我分割:yanwenbin1991@live.com

Enjoy!

正文完
 0