如果你是Chrome用户，你可能因为它的速度和简约而中意它。但是，无论多么崇尚简约，你迟早需要将添加一些迫切需要的额外的功能。

在这种情况下，它的扩展插件可以拯救这一切。

如果在换成Chrome浏览器之前，你是一个Firefox用户（或者你同时使用多种浏览器），你可能已经知道，你中意的大多数Firefox插件在Chrome上也能找到。

今天我们要来看看一些对设计师最有用的Chrome插件。我不写关于Web Developer和Firebug这些Firefox的标志性插件，因为他们已经在其他地方好好地介绍过了。

同样，我也会避免“6款适合设计师的Firefox插件”一文提到的插件。并不是所有东西在Chrome中都可用，但是已经确定可用的有： ColorZilla,  YSlow,  Open With（仅适用于Firefox，且没有Mac OS版本）。

你也许会想尝试它们。

1. 叠加/线框插件

我在另一篇文章中写到一个Firefox插件Pixel Perfect。这是叠加神器，但不幸的是，它并不适用于Chrome浏览器，因为它依赖于Firebug。

反而这些好工具可以做类似的工作： Bootstrap Overlay 或   PerfectPixel by WellDoneCode。如果你正在处理线框，你可能也会想尝试  Instant Wireframe。

Bootstrap Overlay

Bootstrap Overlay只适用于建设Bootstrap框架的网站，目前它不是完全对移动端友好的，但它仍然是许多Bootstrap开发者的选项。

为了检测栅格，网站显然需要使用默认的Bootstrap容器和span class。

Perfect Pixel

PerfectPixel是另一种叠加插件。它处理的是图层，这样你可以在同一页面多次叠加。

它很容易上手。在PixelPerfect中简单地加载任意JPG或PNG格式的网站原型，然后在你的工作代码上手工定位，锁定它的位置，并将它的不透明度降低到大约20％。

当你开发HTML页面时 —— 也许是使用LiveReload刷新你的页面 —— 你可以不断地将HTML和CSS呈现的效果与原始设计稿比较。

Instant WireFrame

Instant WireFrame仅供线框叠加（惊喜，惊喜）。安装并启用它，你会看到任何网站的架构。

虽然一些网站的线框不是很清楚，但是这是网站本身设计/编码有问题，而不是插件的问题。

2. Stylebot

Stylebot是处理CSS样式的插件。它可以让你选择一个对象，并在Web浏览器中手动更改其字体，颜色，边距等。

你可以保存你的样式供以后使用，或者你也可以通过stylebot.me安装其他用户创建和共享的样式。

虽然Stylebot通常当作GreaseMonkey来用，它实际上可以被当作一个快速和肮脏的方法来改变原型和功能。

它的快速和可以让你在30分钟内做好功能样本。你甚至可以给客户展示工作代码，而不必触及代码库。

它可能不适合所有情况，但请记住它。

3. CSS3 Generator

CSS3 Generator是一个处理层叠样式表（CSS）的Chrome插件。这是一个在浏览器内的CSS编辑器，你可以用它来生成：

    * Border Radius

    * Gradient Colors

    * Box Shadow

    * Text Effects

    * Text Columns

    * CSS Transitions

    * RGBA

    * Text Shadow

    * Outline

你会看到列表中少了一些重要的CSS属性，所以它不是一个能处理所有的CSS需求的编辑器，但它的作用仍然不可小视。

4. 链接检查

Check My Links

Check My Links非常简单且非常实用。安装，运行，然后在几秒钟内你会收到一个包含页面上的所有链接及其状态（OK或失效）的报告。

当然，你可以使用其他工具来检查链接，但如果你只对一个特定的页面上的链接感兴趣，那么这个插件要容易上手得多。这个插件速度很快，即使网页包含了上百个链接，你也只需等个几秒钟，而不像一些检查整个网站的综合工具，要等上一个半小时才能得到结果。

5. 屏幕测量工具

Ruul.Screen ruler

这是另一个简单而伟大的Chrome插件。顾名思义，ruul.Screen ruler测量屏幕上的距离。

这是Chrome中与Firefox的MeasureIt齐名的插件，但它附带了更多的选项（尽管并不是所有你可能都需要）。

它的功能列表包括：

    * 水平和垂直拖动标尺

    * 像素和PICA的测量

    * 下拉叠加

    * 多种测量结果

    * 行高指导

    * 笔划宽度

    * 用方向键，一次移动一个像素

    * 同时使用多个标尺

    * 包含4种不同颜色的标尺

    * 包含金属质感和木质的标尺

    * 打开和关闭位置记忆

    * 长标尺

    * 适用于本地文件（若用于本地文件请在属性中启动 'Allow access to file URLs' ）

警告：该插件很容易上瘾。一旦你习惯了它，你绝对会想测测屏幕上能测的一切。开个玩笑，但这个插件很快会变成你不可缺失的东西，是的，它确实非常出色。

6. 字体插件

Firefox为设计师提供了许多字体的插件。Chrome没有提供那么多数量的插件，但还是有一些非常不错的，如Font Playground和  Font Inspector，或 Web Fonts enhanced by TypeDNA应用。

Font Playground

如果你经常使用Google Web fonts工作，那么必备Font Playground。

Font Playground可以选择一种字体，根据你的需要添加各种特效，预览结果并获取代码。

字体列表是最新的，因为它每天都在更新。

TypeDNA

TypeDNA是一个Chrome应用程序，允许从列表中预览Google Web fonts。

双击字体，应用会自动生成代码，你可以直接复制并应用到项目中。

Font Inspector

第三个处理字体的插件是Font Inspector。它真的很简单 - 安装、点击它，然后将鼠标移动到页面上你要检测的部分。

页面对象的字体名称，行高和尺寸将以工具提示的形式显示。很好。

不过，根据个人经验，Font Inspector还是对很多页面不起作用。

这可能是代码结构的原因，而不是插件本身的问题，但不管怎样，这意味着你并不是在哪都能用它。

 Image Properties Context Menu 是另一个我特别喜欢的插件。它可以让你一眼就看到很多重要的图像数据。

你可能也想试试 Web Developer Checklist。这并不完是给设计师用的，但它对所有网站工作者都很有用。

顾名思义，这个插件会提供一个检查单，列出所有在网站发布前需要仔细核对的关键部分。

    * 所以，我是不是错过了什么杀手级Chrome插件？

    * 有没有什么你换成Chrome后无比怀念的Firefox插件？