我爱Google Chrome 。 它的简单性,速度和性能无疑是一流的。 但是有时候,过于简单也可能是个问题,特别是对于我们严重依赖附加组件的网页设计师而言。 我在2008年放弃使用Chrome,只是因为它没有插件。
但是现在,Chrome方面的情况发生了变化,因为每天创建的Chrome扩展功能如此之多,其功能类似于Firefox附加组件 。 从视频创作者到生产力狂热者,一切都可以扩展。
因此,我研究了这些扩展,并根据个人经验选择了40个扩展,这些扩展对于Web设计师与大家共享非常有用 。 请查看以下列表,以适应您的Chrome浏览器并提高工作效率。
头痛从图像中找到正确的配色方案? Chrome调色板可以通过网站图像最多创建64个调色板来满足您的设计或灵感需求, 从而有效地解决您的问题。
![镀Chrome调色板](https://i-blog.csdnimg.cn/blog_migrate/9208c9996b59fdc46ad3bd4259056871.png)
不再需要猜测和累人的程序切换,字体编辑器使您可以修改和观察字体设置,例如大小,行高和生动活泼的字体 。
![字体编辑器](https://i-blog.csdnimg.cn/blog_migrate/c61c2f67011480757feb5ff0f77ff465.png)
如其名称中所指定,该扩展名允许您使用大小,样式,粗细和阴影等文本样式选项从Google字体目录中预览字体 。 如果要使用特定字体,则可以将扩展名中提供的链接和CSS代码复制并粘贴到网站代码中。
![Google字体预览器](https://i-blog.csdnimg.cn/blog_migrate/13aca119719a6310e4ed529a736f2112.png)
Web开发人员是Web设计人员和开发人员的必备扩展,旨在为您提供现有网站所需的每条信息 。 该扩展程序还配备了有用的工具,例如颜色选择器,窗口大小调整器,验证器等。
![Web开发人员](https://i-blog.csdnimg.cn/blog_migrate/4df082dd2394cae6021c2e6bc4c1d545.png)
Stylebot使您无需触摸CSS代码即可直接设置任何网站的样式 ,从而节省了大量打字工作。 此扩展程序的最佳功能可能是每次更改网站时都会生成供您使用CSS代码的功能。
![样式机器人](https://i-blog.csdnimg.cn/blog_migrate/87fe696388fb1933a0f0c44c18789f8a.png)
每次您想知道将哪种CSS样式应用于某个元素时,都厌倦了推送“检查元素”吗? CSS Viewer通过显示基本信息(例如字体,颜色和元素的位置)来帮助您。
![CSSViewer](https://i-blog.csdnimg.cn/blog_migrate/65fe01a34f6837fa284cdb97568a4dec.png)
此扩展最酷的部分是,它列出了每项已实现的Web技术,例如框架和Web标准以及非常详细的信息。
![BuiltWith Technology Profiler](https://i-blog.csdnimg.cn/blog_migrate/8b9786b45d9173753ebcef95f786f300.png)
IE Tab Multi是与原始Internet Explorer相似的扩展,它是您在Chrome中的 Internet Explorer,它支持大量IE的默认功能(例如,多标签)。
![IE Tab Multi](https://i-blog.csdnimg.cn/blog_migrate/d186876627b149973d24fef1fe27d69a.png)
使用Window Resizer,您可以使用标准或用户定义的屏幕分辨率来测试网站的屏幕分辨率兼容性 。
![窗口大小调整器](https://i-blog.csdnimg.cn/blog_migrate/ce79d7bbb40a051fac63a571218601ae.png)
最好的验证程序扩展程序之一,它可以在自动或手动模式下验证联机或本地主机网页HTML代码 。 您也可以选择在网页上显示验证结果,或在全新的标签中查看验证结果。
![HTML验证器](https://i-blog.csdnimg.cn/blog_migrate/b71d74eadd3363b55eefab4aedeebfa3.png)
Sight具有各种主题和字体选项,可将网站的源代码突出显示为外观更舒适的形式。
![视线](https://i-blog.csdnimg.cn/blog_migrate/be81e7b855b63010397573fa13c29c6a.png)
被PHP错误所困扰,但不知道它在哪里,在哪里? PHP Console通过以通知形式显示错误,异常和调试消息来为您提供帮助。
![PHP控制台](https://i-blog.csdnimg.cn/blog_migrate/d9ae4d5fc500acfce1a8d90f1cffcdcd.png)
虽然jQuery已经证明自己是领先的Javascript库,可以改善用户体验,但是jQuery API Search允许您从Chrome Omnibox中搜索jQuery API 。 只需输入“ jq”,然后在多功能框中输入空格,即可随时随地使用。
![保持专注](https://i-blog.csdnimg.cn/blog_migrate/bc4fcbd805cfc7fb576858f604f25e98.png)
专注于您是您的虚拟主管,可以在指定时间内阻止那些浪费时间的网站 ,并在您尝试取消阻止或减少该站点的阻止时间时为您提供建议。 它还配备了关键选项,例如核选项和挑战模式,这些功能以无情的方式浪费了您浪费时间的欲望。
![保持专注](https://i-blog.csdnimg.cn/blog_migrate/521a880e817fd89782194be403677489.png)
使用PopChrom,您可以为文本短语定义自己的快捷方式 ,例如“ ty”表示“谢谢”。 需要使用激活键将缩写词转换为定义的文本短语,因此请选择与其他快捷键不冲突的组合键。
![PopChrom](https://i-blog.csdnimg.cn/blog_migrate/0aba85cfa78b34ef7c7eb03fb318780a.png)
通过易于设置的帐户,您可以使用此任务管理器来记下并编辑需要完成的每个任务 。 此扩展程序最好的部分是您的任务在线存储,因此您可以在安装了此扩展程序的任何位置访问任务记录。
![托多斯](https://i-blog.csdnimg.cn/blog_migrate/7c8d2c856f3e2ec8ae0dcbfe97859237.png)
没有人喜欢单击更多来访问特定页面,Chrome页面扩展是访问所有必要的Chrome页面(如扩展程序)的最快快捷方式。
![Chrome页面扩展](https://i-blog.csdnimg.cn/blog_migrate/e75d2db62f702df7e34e1eff73102ecf.png)
使用AppJump,您可以从浏览器工具栏组织并快速启动Chrome应用程序 。
![AppJump](https://i-blog.csdnimg.cn/blog_migrate/5891caef326434b493deacf236fa63cc.png)
书签过多,您无法有效地组织它们吗? Boorkmark栏切换器可让您创建全新的书签栏并在它们之间轻松切换。
![书签栏切换器](https://i-blog.csdnimg.cn/blog_migrate/4d6245b5ef3250e6110f0307ce3f7467.png)
保存Windows会话,并稍后在使用TabCloud的任何计算机上将其还原,这可以节省您大量时间从书签文件夹的不同部分重新打开不同的网站。
![标签云](https://i-blog.csdnimg.cn/blog_migrate/b960b64b82f6ba88d0e280113cbea643.png)
由搜索引擎巨头Google开发的“相似页面”可在网络上搜索您正在阅读的相似网络内容,并且可能有兴趣了解更多相关信息。
![相似页面](https://i-blog.csdnimg.cn/blog_migrate/6ac2603ad15b78bd389bb59dc4a01233.png)
一个截然不同的截图扩展 ,可以捕获网站的任何部分,并用矩形,圆形,箭头,线条和文本对其进行注释。 然后,您可以将PNG文件格式的屏幕截图导出到计算机或网络中。
![很棒的截图](https://i-blog.csdnimg.cn/blog_migrate/d761237f07c66b9ce3bc5cc609aac889.png)
Evernote的官方扩展名,用于保存您在网络上可能会发现的有趣内容,然后将其上传到Evernote。 该扩展程序还支持搜索和同步您保存的笔记的功能。
![剪辑到Evernote](https://i-blog.csdnimg.cn/blog_migrate/ef629d628374e0915de46f014597a0eb.png)
使用Diigo可以将粘滞便笺高亮显示, 注释或私下或公开发布到网页上,以便您可以随时访问该网页进行查看。
![迪亚哥](https://i-blog.csdnimg.cn/blog_migrate/9310641991d0818d5534f1637447c34c.png)
将Thinkery视为您的在线大脑,然后将链接地址和文本选择保存到其中,以供日后查看。
![思想家](https://i-blog.csdnimg.cn/blog_migrate/54abeb17a7f2d0d5822f24d57f0b1496.png)
您可以使用此扩展名关闭然后再打开一些CSS功能。 当某些CSS功能不可用时,这是一个方便的扩展,可以测试您的网站。
![Chrome DevTools中CSS Features Toggle选项](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/css-features-toggles.jpg?newedit)
一个扩展,它将URL的JSON数据输出格式化为正确的格式和颜色突出显示。 它使从Chrome读取和调试JSON变得更加容易。
![Hongkiat.com中带有颜色的JSON数据](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/json-formatter.jpg?newedit)
此扩展程序可让您从Chrome编写自定义JavaScript和CSS代码,并将其应用于网站或特定的URL。 您还可以通过指定其URL来加载jQuery之类的流行库或其他库。
![用户JavaScript和CSS编辑器](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/user-css-js.jpg?newedit)
一个实用程序扩展,可以识别您网站上的可访问性违规并提供解决方法的建议。
![Chrome DevTools中的Ax标签包含错误通知和建议。](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/axe.jpg?newedit)
此扩展程序提供了浏览器本机设计模式等,它使您可以直接在屏幕上编辑站点文本,填充和颜色 。
![Visbug编辑器覆盖在Hongkiat.com中](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/visbug.jpg?newedit)
查找色彩灵感现在变得更加容易。 该扩展程序将在浏览器选项卡中直接添加来自TrendyPalettes.com的精选色彩组合 。
![](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/palettes-tab.jpg?newedit)
使用此扩展程序可以更方便地检查网站上CSS 。 当您将鼠标悬停在网站上时,它将在浮动框上显示诸如字体系列,颜色,文本对齐和框模型之类的内容,如下所示。
![](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/css-peeps.jpg?newedit)
这使得Github更好用。 该扩展改善了尴尬的间距和布局,并在使用Github时增加了一些便利。
![](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/github-refined.jpg?newedit)
通过将贡献图块转换为3D,此扩展程序可使您的Github观看器冷却100%。
![](https://./assets.hongkiat.com/uploads/google-chrome-extensions-designers/isometric-contributions.jpg?newedit)
反射
随着Chrome扩展程序和应用程序的不断发展和疯狂发展,越来越多的Firefox爱好者可能会将Google Chrome作为其默认的网络浏览器。 话虽这么说,您是否会凭借其当前数量的扩展程序和应用程序而转向Google Chrome? 有哪些扩展,应用程序或功能会激发您迁移到Google Chrome的动力?
另外,如果您的Chrome浏览器中有不错的扩展程序,请务必与我们分享,这里总会有大量的工具供您使用!
翻译自: https://www.hongkiat.com/blog/google-chrome-extensions-designers/