Chrome浏览器扩展程序，无论对开发人员还是设计人员来说，都是非常有用的，有些扩展程序会对开发工具的某类功能进行增强，也有一些会复制开发工具中的部分特性。从某种意义上来说，Chrome商店中的每个扩展都有其价值，但显然我们不能把所有扩展程序都安装起来。

图片来源：Pixabay

　　下面，本文将列出八个比较不错的可供Web开发与设计人员使用的扩展程序，来帮助大家提升自己的工作效率，降低一定的难度。

　　1、Responsive Web Design Tester

　　响应式Web设计测试器可以帮助开发人员和设计人员确保网站是否能够进行响应。可提供不多不同分辨率的虚拟设备来进行测试，安装时默认的可用屏幕尺寸有320、480、640、768、1024、1280。用户也可以手动向列表中添加自定义设备。

　　甚至移动设备的屏幕尺寸也可以测试。

　　2、WhatRuns

　　Whatruns扩展程序可以帮助用户发现站点中所实现的技术栈。只需点击一下，就可以确定前端框架的类型、营销策略的类型、内容分发网络(CDN)、内容管理系统(CMS)等等。

　　无需注册，完全免费。

　　3、ColorZilla

　　ColorZilla是Chrome和Firefox中非常先进、最流行的颜色选择器和滴管工具。有了这个扩展程序，颜色读取会变得很容易，可以在屏幕的任何位置识别颜色。Colorzilla的主要功能是滴管，网页颜色分析，调色板查看器，高级梯度生成器，历史使用颜色。

　　Colorzilla能够从Flash对象中选择颜色，从缩放比例中选择颜色。

图片来源：Pixabay

　　4 UserSnap

　　UserSnap可以让你对屏幕进行捕捉，并允许你对捕获的图像进行注释。UserSnap在收集用户反馈、跟踪Bug报告、对Web应用程序原型提供反馈时非常有用。

　　Usersnap会自动为截取的图像添加浏览器版本、操作系统和屏幕分辨率等信息。

　　5、PageRuler

　　Pageruler用于获取元素的尺寸及其在网页中的位置。该工具中是以像素的形式进行测量的。要获得测量值非常简单，只需在页面中绘图，它就会显示出高度和宽度。

　　显示顶部、底部、高度、宽度、左侧和右侧位置。可以通过方向键调整大小以及进行移动。

　　6、Dimensions

　　Dimensions是设计师测量屏幕尺寸的工具。它以垂直和水平的方式进行测量，即从鼠标指针的上/下和左/右开始。

　　Dimensions对于输入字段、按钮、视频、文本图标、gif等元素非常适用，但不适用于测量图像。

　　7、WhatFont

　　WhatFont可以帮助你查找网页中使用的字体。用户可以将鼠标悬停在文本上，以此来标识文本的字体。它还可以检测该字体服务是由谁所提供的，像Typekit和谷歌字体API。

　　8、PerfectPixel

　　PerfectPixel是专为设计师设计的，方便用户精确地编写CSS与HTML，具有堪称完美的精度。这个扩展允许用户放置一个半透明的覆盖层来比较他们的设计和结果。

　　PerfectPixel支持一个页面上的多个覆盖层，覆盖层被保存在浏览器会话中，因此每个页面可以有不同的覆盖层。

　　原文作者：Santhosh 来源：bleedbytes