如果您是设计师，需要一些有用的工具来加速、协作或审核您的Web 开发(web development)项目，Chrome 扩展程序有很多工具。
该列表包含一些最流行的——有些人认为是必要的——工具和Chrome扩展，每个从事设计工作(design work)的用户都应该在他们的工具包(kit bag)中拥有这些工具和 Chrome 扩展。
1.DomFlags
DOM Flags是一个简单易用的Chrome 扩展(Chrome extension)
，它为开发人员提供了一种使用浏览器工具的新方法。它允许开发人员加快样式元素的任务。
使用每个元素的键盘快捷键，您可以为导航添加书签。
我们都经历过检查高度详细的元素的困难，而且很容易迷失方向。
DOM 标志(DOM Flags)使您能够跟踪样式元素，包括自动准确检查组件的功能。反过来，这将有助于加快DevTools 工作流程和实施(DevTools workflow and implementation)。
DOM 标志(DOM Flags)使您能够跟踪更改。并保持专注于您正在使用的元素。
2. 嘶嘶的
Sizzy为设计人员和开发人员提供了一种在多个视口中测试其网站的简单方法。
Sizzy提供了一种简单的方法来实时检查您的设计。它提供了任意数量的设备和屏幕尺寸的交互式视图。您甚至可以模拟设备键盘(device keyboard)，然后在
横向和纵向模式(landscape and portrait modes)之间切换。
安装Chrome 扩展程序(Chrome extension)会在您的工具栏上添加一个按钮，单击该按钮将在Sizzy 平台中打开当前(Sizzy platform)URL。该扩展程序将阻止所有“ x-frame-options ”标题，因此您将能够在线查看任何网站。
Sizzy是一个开源项目(source project)，您可以在此处(here)查看完整代码。
3.检查机器人
Checkbot可以测试您的网站是否存在安全问题，还可以审核您的网站页面加载速度。它将为设计人员提供一种识别典型错误的方法，并建议改进站点安全性(site security)、搜索引擎(search engine)和站点速度(site speed)。
使用 50 多个最佳实践指标，它将审核网站的最佳实践SEO、断开链接、重复内容(duplicate content)等。该工具还将验证CSS、 JS 和HTML。
Checkbot 可以实时发现设计人员和编码人员的错误(designer and coder errors)
，从而避免您不得不返回并重复检查您的工作。
如果您正在寻找能够修复损坏的页面链接、确保独特的内容和页面标题并消除重定向链的(content and page titles)优质工具(quality tool)，那么此工具将很有用。
对于设计师来说，它可以帮助您最小化
CSS 和 JS(CSS and JS)，并提供有关如何缩小CSS和利用浏览器缓存的建议。
4. GistBox Clipper
GistBox是
对网页设计师最有用的Chrome扩展程序之一。(Chrome)
GistBox 可以从您正在查看的网页上的任何代码块(code block)创建GitHub Gist 。
在任何代码块的右上角(right-hand corner)，您都会看到一个小按钮，按下该按钮后会弹出一个窗口，让您可以将代码保存到Gist中。
您可以通过右击鼠标创建新的 Gists 并保存代码块以供以后检查和使用(inspection and use)。
与GitHub(GitHub)集成使设计人员和开发人员能够收集代码块并对其进行操作或对其进行分类以供以后使用。这使它成为一个方便高效的(convenient and efficient) Chrome 扩展(Chrome extension)工具。
5. ColorZilla
ColorZilla是一个非常有用的 Chrome 扩展，用于收集可以为单个网页设计(web design)项目标记、标记和分类的十六进制代码。
它使您能够选择一个吸管工具，该工具将从任何网页中提取颜色并将其保存到 ColorZilla 剪贴板。
有了它，您可以快速开发调色板以供以后使用，并作为确保您在网页设计和开发(design and development)中始终如一地使用颜色的一种方式。
ColorZilla还充当颜色分析器和
CSS 渐变编辑器(gradient editor)，以便您可以将图像转换为CSS。
6.什么字体
对于那些想要使用自己喜欢的字体并将它们合并到自己的网页设计项目(web design project)中的人来说， 这个
Chrome 扩展程序(Chrome Extension)是一个真正的节省时间。
WhatFont Chrome 扩展(WhatFont Chrome extension)允许开发人员快速分析和识别任何网页上的几乎任何字体。
该扩展程序开发良好，而不必打开检查工具，扩展程序只需在字体上挥动鼠标即可工作。
不仅如此，该扩展还将识别用于提供Pages字体的服务，并将支持Google Font API 和 Typekit。(Google Font API and Typekit.)
7. 光射
LightShot是一个快速截屏工具(screenshot tool)，可让您截取任何页面的全部或部分内容，然后上传或下载或发送到第三方目的地(party destination)。
LightShot拍摄的屏幕截图可以在社交媒体上使用和共享或打印。
您可以为屏幕的选定部分添加注释和添加文本、箭头等。但是，对于网页设计师来说，这个简单工具最出色的功能之一可能是，通过选择一张图片，您可以继续对在线类似图片进行完整的谷歌图片(Google image)搜索。
LightShot可以用多种语言进行配置。
该扩展是用纯JavaScript编写的，也适用于Windows、Chromebook、Linux 和 Mac OS(Linux and Mac OS)。它也可以作为桌面应用程序(desktop application)访问，使其成为依赖多种设备的网页设计师的绝佳选择。
8.很棒的截图
像Lightshot一样，Awesome Screenshot是一个屏幕和图像捕捉扩展。
然而，它确实与Lightshot在许多方面有所不同。(Lightshot)Awesome Screenshot可以配置为将您的所有屏幕截图与您的Google 驱动器(Google drive)连接。
它允许您截取超出视图的元素，以捕获整个页面。它有额外的编辑和注释工具，(editing and annotation tools)逗号允许在扩展中进行裁剪和图像编辑。或者使用额外的 Awesome Screenshot 应用程序
您也可以通过安装桌面版Chrome 应用程序(Chrome application)来扩展其功能
。该扩展还允许视频捕获和共享，以便您在任何站点上工作时都可以与其他开发人员或设计师协作。
您可以将其他图像添加到屏幕截图以及蓝色或擦除(blue or erase elements)您不想显示给其他人的元素。
9.清除缓存
Clear Cache Chrome 扩展(Cache Chrome Extension)是一个快速简单的工具，可让您清除正在查看的页面的 cookie 和缓存。它无需导航到浏览器的设置页面以清除一些简单的页面元素。
对于进行多次编辑并希望实时查看它们的网页设计师来说，这是一个很好的工具，可以消除查看旧数据的许多挫败感。
有时您需要清除缓存和 cookie，但导航到Chrome设置很乏味。清除缓存(Cache)可让您通过单击按钮清除缓存以及全局或本地 cookie。
清除缓存(Cache)将允许您配置要从页面中清除的元素。变量(Variables)包括Cash、下载、所有系统、表单数据、at Cash、索引数据库(index database)、插件数据、密码等。
10. Web 开发者谷歌 Chrome 扩展
Web Developer Google Chrome 扩展(Web Developer Google Chrome Extension)允许开发人员和设计人员轻松审核、分析和检查他们的
网页是否违反最佳实践设计(practice design)、编码、可用性和搜索引擎优化。
它是一款出色的一体化工具，不费力浏览我们的资源，但提供了大量对网页设计有用的信息，还负责网站或页面中的搜索引擎优化(search engine optimization)元素。
该扩展使用多个 Web 开发人员工具安装工具栏。
该工具将为您提供与在多个设备上使用的最佳实践(practice use)相冲突的页面大小、宽度和尺寸的指示。它允许您通过各种设备的模拟检查嵌入的JavaScript并查看您的网站。(JavaScript)
该扩展在Windows、Linux 和 Mac OS 上运行良好。除了编码和设计问题(coding and design issues)之外，它还将提供对元标记信息(tag information)、响应标头、颜色信息(color information)和地形信息的洞察。
您可以在开发人员Chris Pedericks 的网站(Chris Pedericks’ website)上查看该工具的主要功能以及它的全部功能。
毫无疑问，还有许多其他高质量和有用的Chrome扩展可供网页设计师或开发人员(designer or developer)使用。
此列表展示了一些最流行和最有用的工具。对于您认为我比此列表中的工具更有用或更优越的工具，您有什么建议吗？让我们知道。
Top 10 Chrome Extensions and Tools for Web Designers
If you are designer in need of somе usеful
tools to speed uр, collaborate or audit уour web development projеcts, Сhrome
extension has a multitude of tools.
This list comprises some of the most popular – and some would argue necessary – tools and Chrome extensions that every user doing design work should have in their kit bag.
1. DomFlags
DOM Flags is a simple to use Chrome extension
that provides a new way for developers to work with browser tools. It allows
developers to speed up the task of styling elements.
Using keyboard shortcuts for each element you
can bookmark your navigation.
We’ve all experienced the difficulty in
inspecting highly detailed elements, and it’s easy to get lost.
DOM Flags enable you to track styling elements
includes a feature to inspect components with accuracy automatically. This, in
turn, will help speed up DevTools workflow and implementation.
DOM Flags enables you to track changes. And
maintain your focus on the elements you’re working with.
2. Sizzy
Sizzy gives designers and developers a simple
way to test their sites in multiple viewports.
Sizzy provides a simple way to check your
design in real-time. It offers an interactive view of any number of devices and
screen sizes. You can even simulate a device keyboard and then switch between
landscape and portrait modes.
Installing a Chrome extension will add a button to your toolbar, which, when clicked is going to open the current URL in the Sizzy platform. The extension will block all “x-frame-options” headers so you will be able to take a look at any website online.
Sizzy is an open source project, and you can see the entire code here.
3. Checkbot
Checkbot can test your site for security
issues and also audit your website page loading speed. It will provide
designers with a means of identifying typical errors and recommend improvements
in site security, search engine, and site speed.
Using more than 50 best practice metrics, it
will audit a website for best practice SEO, broken links, duplicate content and
more. The tool will also validate CSS, JS, and HTML.
Checkbot picks up on designer and coder errors
in real time saving you the trouble of having to go back and recheck your work
repeatedly.
If you’re looking for a good quality tool that
will fix broken page links, ensure unique content and page titles and eliminate
redirect chains this tool would be useful.
For designers, it can help you minimize your
CSS and JS as well as provide recommendations on how to minify your CSS and
leverage browser caching.
4. GistBox Clipper
GistBox is one of the most helpful Chrome
extensions for web designers.
GistBox can create a GitHub Gist from any code block on the webpage you are viewing.
At the top right-hand corner of any code
block, you’ll see a small button, which when pressed, will allow a pop-up that
enables you to save the code to the Gist.
You can create new Gists with a right mouse
click and save blocks of code for later inspection and use.
Integrating with GitHub enables designers and
developers to collect code blocks and manipulate them or categorize them for
later use. This makes it a convenient and efficient Chrome extension tool.
5. ColorZilla
ColorZilla Is an incredibly useful Chrome
extension for gathering hex codes which can be tagged, labeled and categorized
for individual web design projects.
It enables you to select an eye-dropper tool
that will extract the color from any web page and save it to the ColorZilla
clipboard.
With it, you can quickly develop color
palettes for later use and as a way of ensuring you are using color
consistently in web design and development.
ColorZilla also acts as a color analyzer and
CSS gradient editor so that you can convert an image to CSS.
6. WhatFont
This
Chrome Extension is a real time-saver for those wanting to utilize their
favorite fonts And incorporate them into
their own web design project.
WhatFont Chrome extension allows developers to
quickly analyze and identify almost any font on any web page.
The extension is well developed and rather
than having to open up inspection tools the extension works by merely waving
the mouse over the font.
Not only that but the extension will also identify the service that’s being used to serve up a Pages went font and will support Google Font API and Typekit.
7. LightShot
LightShot is a quick screenshot tool that
enables you to capture the entire, or part of any page and either upload it or
download it or send it to a third party destination.
Screenshots taken by LightShot can be used and
shared on social media or printed.
You can annotate and add text, arrows and more
to the selected portion of the screen. But perhaps one of the most brilliant
features of this simple tool for web designers is that by selecting an image
you can then proceed to do a full Google image search for similar images
online.
LightShot can be configured in multiple
languages.
The extension is written in pure JavaScript and will also work for Windows, Chromebook, Linux and Mac OS. It can also be accessed as a desktop application making it an excellent choice for web designers who are dependent on multiple devices.
8. Awesome Screenshot
Like Lightshot, Awesome Screenshot is a screen
and image capturing extension.
It does differ from Lightshot, however, in a
number of ways. Awesome Screenshot can be configured to connect all your
screenshots with your Google drive.
It allows you to screenshot those elements
which are beyond your view in order to capture the entire page. It has
additional editing and annotation tools comma allows for cropping and image
editing all within the extension.. or with the use of additional Awesome
Screenshot applications
You can extend its features by installing the
Chrome application for desktop as well. The extension also allows for video
capturing and sharing so that you can collaborate with other developers or
designers when working on any site.
You can add additional images to a screenshot
as well as blue or erase elements that you would rather not show to others.
9. Clear Cache
The Clear Cache Chrome Extension Is a fast and
simple tool that enables you to clear cookies and cache of the page you’re
looking at. It removes the need to navigate to the settings page of your
browser in order to clear a few simple page elements.
For web designers who are making multiple
edits and want to view them in real time, this is an excellent tool that will
eliminate much of the frustration of looking at old data.
There are times you need to clear your cache
and cookies, but navigating to Chrome settings is tedious. Clear Cache lets you
erase your cache as well as global or local cookies at the click of a button.
Clear Cache will allow you to configure which
elements you want to clear from the page. Variables include Cash, downloads,
all systems, form-data, at Cash, index database, plugin data, passwords and
more.
10. Web Developer Google Chrome
Extension
The Web Developer Google Chrome Extension
allows developers and designers to easily audit, analyze and check their web
pages for any violations of best practice design, coding, usability, and search
engine optimization.
It’s a great all-in-one tool that is not heavy
on browse our resources yet provides a ton of information useful to web design
is also responsible for search engine optimization elements within a website or
page.
The
extension installs the toolbar with multiple web developer tools.
The tool will give you indications on page
size, width, and dimensions which make conflict with best practice use on
multiple devices. It allows you to check embedded JavaScript and view your
website through a simulation of various devices.
The extension functions well on Windows, Linux
and Mac OS. In addition to coding and design issues, it will also provide
insights into meta tag information, response headers, color information, and
topographic information.
You can review the main features of the tool as well as it’s full capabilities on developer Chris Pedericks’ website.
No doubt there are a plethora of other high
quality and useful Chrome extensions that are web designer or developer could
use.
This list showcases a few of the most popular
and useful tools. Do you have any recommendations for tools which you think I’m
more useful or superior to the ones in this list? Let us know.
