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

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

其实这里是有 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!