前端程序员必知的30个Chrome扩展

来自：码农网

译文链接：http://www.codeceo.com/article/30-useful-extensions-for-web.html

英文原文：https://medium.com/@vilcins/useful-extensions-for-front-end-developers-and-designers-206aebb9884c#.6xqjzyvno

翻译作者：码农网 – 小峰

谷歌Chrome浏览器是网络上可用的最好的浏览器之一，并且自2011年11月超越了Firefox浏览器之后，已经成为了互联网上占主导地位的浏览器。今天，我想与大家分享一些最实用的谷歌Chrome浏览器扩展，可以帮助你提高工作效率。

Devtools Terminal ——浏览器终端。牛逼的不得了！

LiveReload——为官方LiveReload应用程序（Mac和Windows）和第三方，例如guard-livereload和yeoman，提供Chrome浏览器集成。

BrowserStack Local ——本地测试app可以让你即刻配置和测试本地/内部服务器，和包括HTML、CSS和JavaScript文件在内的本地文件夹。在BrowserStack上的安全云设置中测试布局，工作流程和交互性，跨越700+个真正的台式机和移动浏览器。

JSONView ——验证和查看JSON文件。

Postman——用Postman为API工作流程增加负荷！更快地构建，测试，并记录你的API。已经不止一百多万的开发人员投入了Postman的怀抱。

Window Resizer——该扩展可以重新调整浏览器窗口的大小，以仿效各种不同的分辨率。对网页设计师和开发人员尤其有用，可以帮助测试在不同浏览器分辨率下的布局。

WhatFont——识别网页上的字体最简单的方法。

Page Ruler——画一把尺子以得到像素维数和定位，并测量任何网页上的元素。

Web Developer Checklist ——对于那些想要确保遵循最佳实践的web开发人员，这个扩展可以让你很容易发现自己网站的问题域。

Image Downloader——浏览和下载网页上的图像。

Alexa Traffic Rank ——Alexa Traffic Rank是Alexa Internet提供的免费的Chrome扩展，并且是Alexa流量面板的唯一扩展。这款Alexa扩展可以在你网上冲浪的时候陪伴你，提供有关你访问的网站的Alexa数据，并且不会中断你浏览网站。

Eye Dropper ——Eye Dropper是开源扩展，它可以让你从网页，拾色器和个人色彩历史中选取颜色。

Firebug Lite ——Firebug Lite并非Firebug或Chrome Developer Tools的替代品。它是使用这些工具时也可以一起使用的工具。Firebug Lite提供了丰富的视觉表现，这些视觉表现也是我们在Firebug 中，涉及HTML元素，DOM元素，以及盒模型阴影（Box Model shading）时惯常见到的。它还提供了一些很酷的功能，比如用鼠标检查HTML元素，以及实时编辑CSS属性。

Web Developer ——添加了一个拥有各种web开发工具的工具栏按钮。是Firefox web开发扩展的官方端口。

Responsive Inspector —— Responsive Inspector是一个简单的谷歌Chrome浏览器扩展，它允许查看被访问网站的媒体查询。这在开发响应式网络布局时非常有用，因为它可以直观地显示在CSS样式表中定义了什么分辨率。

BuiltWith ——使用该扩展，可以找出你正在访问的网站是用什么构建的。

Corporate Ipsum ——作为填充文本使用，生成随机的企业公关说辞。

User-Agent Switcher ——模拟用户代理（User-Agent）字符串。有了这个扩展，你就可以快速轻松地在用户代理字符串之间进行切换。此外，你还可以设置每次要冒名的特定URL。

YSlow ——YSlow分析网页，并提出如何在一套高性能web页面规则的基础上改进性能。YSlow在三个预定义规则之一或一个用户定义的规则集的基础上将网页分等级。它提供了改进页面性能的建议，总结了网页页面的组件，显示了关于页面的统计信息。

CSS Shapes Editor ——使用交互式编辑器来创建并调整CSS Shape值，重叠所选元素。

Pesticide ——这个扩展可以插入Pesticide CSS到当前页，形成每个元素的示意图以便于更好地看到它们在页面上的位置。

Responsive Web Design Tester ——在移动设备上测试移动网站。此扩展反映了移动设备的大小和它的浏览器。

Palettab——将超棒的颜色和字体带给新的标签页！每次点击新标签按钮，都会给你一点点新鲜。

jQuery Audit ——jQuery Audit在元素面板中创建了一个侧边栏，包含jQuery的下放事件，内部数据等，就像活跃的DOM节点，函数和对象。

Font Changer——改变Facebook、Twitter、Google、Youtube和其他任何网站的字体。测试Google Web Fonts™。

HTML5 Outliner——用标题和分节元素生成一个可导航的页面大纲。

PerfectPixel ——此扩展允许开发人员把一个半透明的图像叠加到已开发好的HTML的顶部，并在它们之间执行每个像素的比较。

SelectorGadget ——Selector Gadget 是一个开源的Chrome浏览器扩展，能够让CSS选择器轻而易举地生成和发现于复杂网站。

Stylebot——瞬间改变网站的外观。