适用于网页设计师和开发人员的30个Chrome扩展程序

作者: Monica Porter
创建日期: 17 行进 2021
更新日期: 17 可能 2024
Anonim
让程序员爽歪歪的 chrome 插件
视频: 让程序员爽歪歪的 chrome 插件

内容

Chrome的开发工具非常棒,但可以在互联网浏览器中添加更多激动人心的功能,从而简化网页设计和开发。

当然,还有很多其他工具可以加快速度,请参阅我们最喜欢的Web设计工具文章。不过,到目前为止,这里有30个我们最喜欢的Chrome扩展程序,可供网页设计师和开发人员使用。

01.简化Gmail

如果您发现Gmail自身的功能太乱了,请向Simplify Gmail打个招呼,它可以清除过去几年中积累的所有碎片和不良的UI决策。由Gmail的前首席设计师Michael Leggett创建,它摆脱了所有分散注意力的麻烦,并为您提供了更加精简和实用的版本。

02.光谱


某种程度的色盲影响全球约2亿人,但在设计师的可访问性检查表上,迎合他们的需求通常很低。不过,借助Spectrum,您可以针对各种类型的色觉缺陷快速测试您的网站,并确保一切都清晰无误。

03. CSS扫描2.0

Chrome的开发工具是一种方便的方法,可以在引擎盖下查看网站的工作原理,但是,如果您要查看CSS,则CSS Scan 2.0甚至更容易。将鼠标悬停在任何元素上,其CSS将显示在弹出视图中,使您可以单击复制其规则。您可以使用它来复制主题或模板中的特定元素,以适应自己的使用,非常适合调试自己的代码。

04.氨基


这是另一个很棒的CSS工具。 Amino是一个实时CSS编辑器,可让您在浏览器中生成样式表并将其实时应用于网站。它有效地使您可以对所访问的任何网站进行永久性的设计更改,如果您使用Google帐户登录了Chrome,则样式表将被同步,以便可以在所有台式机设备上的Chrome上进行访问。

05.铁杆

如今,响应式网页设计已成定局,并且您想要一种直接的方法来检查多个视口中的设计,Sizzy值得一看。它会为您显示在许多不同的设备屏幕尺寸上呈现的页面的交互式视图,还可以显示和隐藏模拟的设备键盘,以及在纵向和横向模式之间切换。

06.网站面板


下次您看到一个充分利用色彩的网站时,这是一种利用色彩的简单方法。 “网站调色板”从网站中提取主要颜色,并生成可共享的调色板,您可以轻松地向协作者显示该调色板。您还可以下载Sketch模板,并且还提供Adobe Swatch支持。

07. Checkbot

确保您网站上的所有链接都能正常工作是即时可用性,这也是改善您的SEO的好方法。 Checkbot是Chrome浏览器的扩展程序,可检查断开的链接,重复的标题,重定向链,无效的HTML / JS / CSS等,因此您可以快速审核网站中的不良链接并进行修复。

08.托比

公认的事实是,当您打开Chrome几个小时后,小手指的宽度就会变成一堆令人困惑的标签。托比(Toby)是驯服他们的好方法;有了它,您可以将所有这些选项卡组织成链接集合,以替代加载单个书签的方法,从而使它们更易于管理。

09. DomFlags

使用DomFlags可以显着加快样式元素的处理速度,DomFlags是一个真正的绝佳扩展,可让您为DOM元素创建键盘快捷键。就像拥有用于导航DOM的书签一样;这将改变您使用DevTools的方式。

10.高度荧光笔

这是一种使人们参与讨论的有趣方式:高度允许您共享网络文章的重点内容,因此您可以将注意力吸引到最重要的写作上。

下一页:另外10个Chrome扩展程序

最近的文章
投影贴图已成时代
发现

投影贴图已成时代

精明的消费者可能对吸引他们注意力的传统方法感到麻木,但对于许多人来说,将自然环境摆在眼前的新颖性还没有消失。正确完成投影投影后,您就可以做到这一点–塑造现实,就像手中的腻子一样。 “在现有的建筑结构上使用时,它可以改变它们,并以一种精美的,针对特定地点的方式带您进入旅途,” Knifedge的创意总监蒂姆·伯德(Tim Bird)如此兴奋。现场活动–从百老汇的演出到摇滚音乐会和体育赛事,...
您从未知道需要的10个CodePen技巧
发现

您从未知道需要的10个CodePen技巧

CodePen是一个快速原型制作的杀手级工具包,拥有令人鼓舞和支持的贡献者社区。它通过提供无障碍的创意代码迭代,消除了生成新开发环境的麻烦,并使用户能够轻松解决从异想天开,荒唐可笑到实用和部署的众多前端概念,已成为业界最受欢迎的Web设计工具之一。 -准备好。在本文中,我们汇总了10条最重要的技巧,可从网络行业最喜欢的编码场所中获取更多信息-这些将永远改变您使用CodePen的方式。如果这激发了您...
测试了18种图像压缩工具
发现

测试了18种图像压缩工具

当您希望提高网站的性能时,有人建议您直接进入每个页面的详细分析:您正在执行的HTTP请求,所涉及的任何重定向,脚本和样式表的位置等等。但是毫无疑问,研究这些问题会有所帮助,但首先要考虑基础知识很重要。特别是,您确定您使用的所有图形都针对网络进行了完全优化吗?您可能已经确保为每张图像选择合适的格式,并将其尺寸(以像素为单位)保持最小。也许您已尽最大可能降低了JPEG质量设置。 (尽管您对基本知识不太...