29个面向网页设计师和开发者的Chrome扩展程序

IT资讯 2018-08-02 54 次浏览 0 条评论

最好的免费Chrome扩展程序,让您的生活更轻松。

Chrome的DevTools很棒,但可以为您的互联网浏览器添加更多令人兴奋的功能,以便更轻松地进行网页设计和开发。以下是我们最喜欢的29个针对网页设计师和开发人员的Chrome扩展。

01. Sizzy

Sizzy网站

跨多个视口测试网站的简便方法

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

02.现场调色板

Site Palette网站

如果您喜欢的配色方案,Site Palette将帮助您借用它

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

03. Checkbot

Checkbot网站

整理所有这些破碎的链接,并获得免费的SEO提升

确保您网站上的所有链接真正起作用,即时可用性获胜,这也是改善您的SEO的好方法。 Checkbot是一个Chrome扩展程序,用于检查损坏的链接,重复的标题,重定向链,无效的HTML / JS / CSS等等,因此您可以快速审核您的网站是否存在错误链接并修复它们。

04.托比

托比网站

将所有不守规矩的标签变成有用的书签集合

这是一个普遍公认的事实,当你打开Chrome几个小时的时候,你的小指的宽度将是一个令人困惑的标签。托比是驯服他们的好方法;有了它,您可以将所有这些选项卡组织成链接集合,作为单个书签的替代,使它们更易于管理。

05. DomFlags

DomFlags网站

使用DevTools的新方法
使用DomFlags极大地加速样式元素的处理,这是一个非常棒的扩展,可以让您为DOM元素创建键盘快捷键。就像拥有导航DOM的书签一样;这将改变你使用DevTools的方式。

06.高度荧光笔

高度网站

高度,一种参与行业对话的新方式
这是一个让人们参与讨论的有趣方式:高度允许您分享网络上文章的精彩内容,这样您就可以将注意力集中在最重要的写作上。

07. Booom

Booom网站

使用Booom获得更好的Dribbble体验
Booom通过在列表中显示更大的镜头使得Dribbble变得更好;在列表中放置Like和Add to Bucket按钮;使GIF自动播放并带来无限滚动。

08. CSS-Shack

Google Chrome扩展程序 - CSS Shack

此Chrome扩展程序可让您创建图层样式并将其导出到CSS文件中

这款功能强大的Chrome扩展程序可让您创建设计,然后将其导出为CSS文件,以便在您的网站上使用。它支持图层,并包含您常用照片编辑器中常用的大量工具。

09. Mar猴

Google Chrome扩展程序 - Marmoset

使用Marmoset,您可以在几秒钟内创建华丽的代码快照
这个出色的扩展将为您的演示和模型带来代码和输出快照。您还可以添加主题和效果,以便为促销和在线投资组合创建图像。
10. iMacros for Chrome

Google Chrome扩展程序 - IMacros

iMacros Chrome扩展程序可让您记录操作并保存操作

作为Web开发人员,您可能需要测试您的网页。 一遍又一遍地重复相同的动作可能是一个令人厌烦的过程。 iMacros是一个方便的Chrome扩展程序,可让您记录您的操作并保存它们,因此您只需要执行一次。 之后,您可以一遍又一遍地测试您的页面,只需单击一下按钮即可重复操作。 它节省了宝贵的时间,节省了您的时间,因此您可以专注于更紧迫的事情。
11.窗口调整器

Google Chrome扩展程序 - Windows Resizer

此Chrome扩展程序会重新调整浏览器窗口的大小,以便模拟各种分辨率
这个Chrome扩展程序是一个非常有用的工具,完全按照它上面的说明调整 - 调整浏览器窗口的大小,以帮助您进行响应式网站设计。从常用显示器尺寸列表中进行选择,或添加自定义尺寸和分辨率以提高精度。

12. Naptha项目

谷歌Chrome扩展 - 项目Naptha

通过Naptha,您可以突出显示,复制,编辑和翻译网络上任何图像的文本
如果您发现自己使用带有嵌入文本的模型图像,Project Naptha可以为您节省一个轻微刺激的世界。由于一些智能的OCR技巧,它使您能够突出显示,复制和粘贴任何图像中的文本;它甚至可以为你翻译它。

13. WhatFont

Google Chrome扩展程序 - 什么字体

他们用什么字体? WhatFont Chrome扩展程序可以告诉您!
作为一款非常实用的Google Chrome扩展程序,WhatFont允许开发人员和设计人员识别网页上使用的字体。因此,如果你偶然发现了一个想要在未来的项目中使用的看似奇特的网络字体,只需将鼠标悬停在它上面并立即找出它是哪种字体。

14. Web Developer

Google Chrome扩展程序 - Web Developer

Web Developer Chrome扩展程序提供了一系列有用的开发工具
作为Web开发人员,您可能会问自己如何在没有此扩展的情况下生活。它为Chrome添加了一个工具栏按钮,其中包含大量有用的Web开发人员工具。它是Firefox的Web Developer扩展的官方端口。

15. Web开发人员核对表

Google Chrome扩展程序 - Web开发人员核对表

使用这个方便的Chrome扩展程序可以快速修复问题
此工具允许您检查所有网页在SEO,可用性,可访问性和性能(页面速度)方面是否遵循最佳实践。因此,例如,如果您在网页上没有H1标签,或者网页缺少其元标题或元描述,它将通知您,以便您可以快速解决问题。如果您点击扩展程序底部的“更多信息和帮助”链接,您会找到更深入的核对清单。

16. DevTools自动保存

Google Chrome扩展程序 - 开发工具自动保存

自动将对页面的CSS和JS的任何更改保存到其源文件中
作为所有Web开发人员的真正宝石,DevTools AutoSave允许您通过Chrome Dev Tools环境自动保存您对网页的CSS和JS所做的任何更改到其源文件。它易于设置和使用,它将为您节省大量时间和压力。

17. Instant Wireframe

Google Chrome扩展程序 - 即时线框

查看带有线框覆盖的实时网页
只需单击一下,即可将任何网页转换为线框。此Google Chrome扩展程序可帮助网站开发人员和设计人员使用线框覆盖查看网页,无论是本地网页还是网络直播网页。

18. ColorZilla

Google Chrome扩展程序 - ColorZilla

使用ColorZilla,您可以从浏览器的任何位置获取颜色读数

ColorZilla Chrome扩展程序是一种先进的吸管,颜色选择器,渐变生成器和有用的颜色工具,可以帮助您进行设计 - 就在浏览器窗口中。

19. Streak CRM for Gmail

Google Chrome扩展程序 - Streak

将电子邮件会话转换为可跟踪,可分配的票证
Streak是在Gmail中管理CRM和支持电子邮件的终极工具。它允许您将单个电子邮件或整个会话转换为可自行管理或与他人共享的可跟踪,可分配,有组织的票证。

20.搜索Stackoverflow

Google Chrome扩展程序 - 搜索Stackoverflow

通过此必备扩展程序快速解答您的问题
如果您是一名Web开发人员,那么您可能已经听说过Stack Overflow,它是任何与开发相关的问题的首选。如果没有,那么你肯定需要检查出来。社区蓬勃发展,涵盖了从C#和Java到PHP和jQuery的广泛主题。这个出色的扩展程序直接在浏览器中添加了一个搜索框,允许您搜索Stack Overflow的大量资源。

21. PerfectPixel

Google Chrome扩展程序 - 完美像素

此扩展程序可帮助您确保您的网站与像素的设计像素相匹配
设计师讨厌它时,令人惊叹的设计在编码时不能完美匹配。 Perfect Pixel确实是Web开发人员的完美扩展,他们正在努力开发能够准确表示设计的网站。这种易于使用的扩展程序使您可以在网页顶部放置半透明图像叠加层,并在它们之间执行每像素比较,以确保其100%准确。

22. Code Cola

Google Chrome扩展程序 - Code Cola

当场编辑您的网页CSS
这个工具不仅允许您查看您正在处理的内容的源代码,而且还可以用作CSS编辑器。这意味着您可以在现场编辑网页的CSS样式并立即查看更改。

23. IE选项卡

Google Chrome扩展程序 - IE标签

使用不同版本的IE测试网页
IE选项卡是网络上最流行和最有用的IE模拟器之一,它使网络开发人员可以直接在Chrome浏览器中测试不同版本的IE网页。

24. PicMonkey

Google Chrome扩展程序 - PicMonkey

只需单击按钮即可从网页中抓取每个图像
这是一个易于使用的免费在线照片编辑器,允许您编辑网页图像和屏幕截图。但这不是什么让它变得如此美好。 PicMonkey还允许您通过单击按钮抓取每个图像和整个页面的屏幕截图。选择图像后,您可以以任何方式编辑图像,从应用效果到更改曝光。

25. Chrome Daltonize

Google Chrome扩展程序 - Chrome Daltonize

创建更适合具有色觉缺陷的人观看的图像
色觉缺陷(CVD)或色盲影响全球数百万人。这种巧妙的扩展使用Daltonization,这种技术可以创建更适合CVD患者观看的图像。这个出色的扩展可用于模拟图像对于CVD患者的显示方式,并帮助您设计更易于访问的Web应用程序。

26.检查我的链接

Google Chrome扩展程序 - 检查我的链接

选中我的链接抓取您的网页并查找损坏的链接
完成建站点?啊,但你有没有通过检查所有的链接?无论你多么小心,你不可避免地会忽略一两个,而检查它们都是一件乏味的苦差事。除非....使用Check My Links扩展程序,您可以简单地将其用于工作,它将梳理任何页面上的所有链接,突出显示绿色的有效链接和红色的破坏链接。

27. Flickr Tab

Google Chrome扩展程序 - Flickr标签

使用漂亮的Flickr图像智能化您的Chome选项卡
您是否厌倦了在打开新标签时看起来无聊的Chrome标签?你的祈祷的答案已经以Flickr Tab的形式出现。这是一个简单的小扩展,每次打开一个窗口时都会显示一张流行的Fickr照片。单击照片以在Flickr中查看,或单击用户名以查看摄影师的更多照片。

28.谷歌艺术项目

Google Chrome扩展程序 - Google Art Project

使用Google Art Project,使每个新的Chrome标签成为艺术和发现的冒险
与Flickr Tab的光泽照片类似,Google的Art Project扩展程序会在您打开的每个新标签页中为您提供来自梵高和莫奈等高分辨率的杰作。如果图片引起您的兴趣,请点击它以访问Google文化学院网站,该网站上有关于该作品及其创建者的信息。

29.数据保护

Google Chrome扩展程序 - 数据保护程序

使用Google基于压缩的数据保护程序在您的手机上查看设计时节省现金
那么,你的移动服务提供商的最新账单是不是很卷曲?不要惊慌。您需要Google提供的数据保护程序。扩展程序完成了它在锡上所说的内容:它减少了浏览网页时使用的数据量。启用后,Chrome会在您下载之前使用Google服务器压缩页面。只有一点需要注意:SSL和隐身页面不会包含在内。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论