适用于Web设计人员的十大Chrome扩展程序和工具


如果您是设计师,需要一些有用的工具来加快,协作或审核您的Web开发项目,Chromeextension提供了许多工具。

此列表包含一些最受欢迎的工具-有些辩称必要–每位进行设计工作的用户都应该将工具和Chrome扩展程序 放在其工具包中。

1。 DomFlags

<图class =“ lazy aligncenter”>

DOM标志是一个易于使用的Chrome扩展程序,为开发人员提供了一种使用浏览器工具的新方式。它允许开发人员加快样式元素的工作。

为可以为导航添加书签的每个元素使用键盘快捷键。

我们都经历了检查高度详细元素的困难,而且很容易迷路。

DOM标志使您可以跟踪样式元素,包括自动检查组件准确性的功能。反过来,这将有助于加快DevTools的工作流程和实施。

DOM标志使您可以跟踪更改。并保持对工作元素的关注。

2。 Sizzy

<图class =“ lazy aligncenter”>

Sizzy为设计师和开发人员可以轻松地在多个视口中测试其网站。

Sizzy提供了一种简单的方法来实时检查您的设计。它提供了任意数量的设备和屏幕尺寸的交互式视图。您甚至可以模拟设备键盘,然后在横向和纵向模式之间进行切换。

安装Chrome扩展程序会在工具栏中添加一个按钮,单击该按钮即可在Sizzy平台中打开当前URL。该扩展程序将阻止所有“ X帧选项 ”标题,以便您可以在线查看任何网站。

Sizzy是一个开源项目,您可以看到整个代码这里

3。 Checkbot

<图class =“ lazy aligncenter”>

Checkbot可以测试您的网站上的安全性问题,并审核您的网站页面加载速度。它将为设计人员提供识别典型错误的方法,并建议改进网站安全性,搜索引擎和网站速度。

使用50多个最佳实践指标,它将审核网站的最佳实践SEO,断开的链接,重复内容等等。该工具还将验证CSS,JS和HTML。

Checkbot实时获取设计器和编码器错误,为您省去了重复进行重新检查工作的麻烦。

如果您正在寻找一种高质量的工具来修复损坏的页面链接,请确保唯一的内容和页面标题并消除重定向链,此工具将非常有用。

对于设计者来说,它可以帮助您将CSS和JS以及提供有关如何减少CSS和利用浏览器缓存的建议。

4。 GistBox Clipper

<图class =“ lazy aligncenter”>

GistBox是对网页设计师最有用的Chrome扩展程序之一。

GistBox可以从您正在查看的网页上的任何代码块中创建GitHub Gist

在任何代码块的右上角,您都会看到一个小按钮,按下该按钮会弹出一个弹出窗口,使您可以将代码保存到Gist。

您可以右键单击鼠标可以创建新的Gist,并保存代码块以供以后检查和使用。

与GitHub集成可以使设计人员和开发人员收集代码块并对其进行处理或分类以供以后使用。这使它成为便捷高效的Chrome扩展工具。

5。 ColorZilla

<图class =“ lazy aligncenter”>

ColorZilla是一个令人难以置信的有用的Chromeextension,用于收集可以为单个Web设计项目进行标记,标记和分类的十六进制代码。

它使您能够选择一种滴管工具,该工具可以从任何网页中提取颜色并将其保存到ColorZillaclipboard

。有了它,您可以快速开发调色板以备后用,并确保在网页设计和开发中一致地使用颜色。

ColorZilla还可以用作颜色分析器和CSS渐变编辑器,以便您可以将图像转换为CSS。

6。 WhatFont

<图class =“ lazy aligncenter”>

。Chrome浏览器扩展程序是实时节省想要使用自己喜欢的字体并将其合并到自己的Web设计项目中的人。

WhatFont Chrome扩展程序允许开发人员快速分析和识别任何网页上的几乎任何字体。

该扩展程序开发良好,无需打开检查工具,该扩展程序只需要在字体上挥动鼠标即可。

扩展程序不仅可以识别正在用于提供服务的服务,而且还可以识别该服务。页面使用了字体,将支持Google字体API和Typekit。

7。 LightShot

<图class =“ lazy aligncenter”>

LightShot是一种快速的方法屏幕快照工具,使您可以捕获任何页面的全部或部分,然后上传或下载或发送到第三方目的地。

LightShot拍摄的屏幕截图可以在社交媒体上使用和共享或打印。

您可以注释和添加文本,箭头等到屏幕的所选部分。但是,对于Web设计人员而言,这个简单工具的最杰出的功能之一就是,通过选择图像,您可以继续对类似图像在线进行完整的Google图像搜索。

LightShot可以用多种语言进行配置。

该扩展程序是用纯JavaScript编写的,也将适用于Windows,Chromebook,Linux和Mac OS。它也可以作为桌面应用 进行访问,使其成为依赖多个设备的Web设计人员的绝佳选择。

8。很棒的截图

<图class =“ lazy aligncenter”>

就像Lightshot一样,Awesome Screenshot是一个屏幕和图像捕获扩展程序。

它与Lightshot确实有很多不同。可以将Awesome屏幕截图配置为将所有屏幕截图与Google驱动器连接起来。

它允许您对屏幕之外的那些元素进行屏幕截图,以捕获整个页面。它具有附加的编辑和注释工具,逗号可用于在扩展程序中全部进行裁剪和图像编辑。或通过使用其他AwesomeScreenshot应用程序

,也可以通过为桌面安装Chrome应用程序来扩展其功能。该扩展程序还允许进行视频捕获和共享,以便您在任何站点上工作时都可以与其他开发人员或设计人员合作。

9。清除缓存

<图类=“ lazy aligncenter”>

清除缓存Chrome扩展程序是一种快速简单的工具,可让您清除正在查看的页面的Cookie和缓存。它不需要导航到浏览器的设置页面即可清除一些简单的页面元素。

对于正在进行多个编辑并希望实时查看它们的Web设计人员来说,这是一个出色的工具

有时候您需要清除缓存和cookie,但是导航到Chrome设置很繁琐。清除缓存可让您单击按钮即可擦除缓存以及全局或本地cookie。

“清除缓存”将允许您配置要从页面中清除的元素。变量包括Cash,下载,所有系统,表单数据,Cash,索引数据库,插件数据,密码等等。

10。 Web Developer Google ChromeExtension

The Web Developer Google Chrome Extension允许开发人员和设计人员轻松审核,分析和检查其网页,以了解是否违反最佳做法设计,编码,可用性和搜索引擎优化。

这是一款出色的多合一工具,不仅可以浏览我们的资源,而且还提供了大量对网页设计有用的信息,而且还负责网站或页面中的搜索引擎优化元素。

扩展程序会在工具栏上安装多个Web开发人员工具。

该工具将为您提供有关页面大小,宽度和尺寸的指示,这些指示与在多种设备上使用的最佳做法相冲突。它允许您检查嵌入式JavaScript并通过模拟各种设备来查看网站。

该扩展程序在Windows,Linux和Mac OS上运行良好。除了编码和设计问题之外,它还将提供对元标记信息,响应标题,颜色信息和地形信息的洞察力。

您可以查看该工具的主要功能以及开发人员的全部功能。 克里斯·佩德里克斯(Chris Pedericks)的网站

毫无疑问,还有很多其他高质量和有用的Chrome扩展程序可供Web设计人员或开发人员使用。

此列表展示了一些最受欢迎和最有用的工具。您是否对我认为有用或优于此列表的工具有任何建议?让我们知道。

Chrome瀏覽器開發人員工具

相关文章:


27.03.2019