毫无疑问,WEB设计者和开发者都喜欢用Google Chrome以及Chrome扩展程序。强而有力的Chrome开发者工具使它成为WEB设计和开发工做的最佳选择。Google开发者工具已经提供了大量的功能,可是,若是你以为这还不够的话,你能够选择Chrome扩展工具。php
Chrome扩展工具的优势和缺点web
第三方Chrome扩展程序惟一比较大的缺点是其质量和可用性至关不一致。多年来我用过不少Chrome扩展工具,今天我也在Chrome网上应用商店看了看我是否错过了什么。我发现不少扩展工具根本就不能用或者就是复制的Chrome开发者工具的功能(固然,这些已经被弃用)。我也遇到过不少不一致的UI。即使如此,我认为仍是有不少扩展工具在建站时仍是颇有用的。 译者注:下面的一些扩展工具我经过搜索方法并无找到,因此请点击文章中的连接来直接获取这些扩展工具。json
WEB DEVELOPER浏览器
在Google Chrome第一个版本发布以前,不少WEB设计师和开发者都使用Firefox。相似于Chrome,Firefox也有不少的第三方支持。最流行的Firefox扩展工具中也有一个叫作“WEB DEVELOPER”。在之后的几年中,这个扩展也进入了Chrome,而且,依然有着数量惊人的有用的功能。工具
很难从Web Developer中选出一个特征,可是我发现我使用十分频繁的是经过Outline选项卡调试CSS。它很是有助于经过元素在页面上的位置来突出显示他们。网站
BUILTWITHui
BuiltWith是一个目的很是简单的插件。若是你好奇一个网站是用什么技术来建立的,你点击BuiltWith按钮来查看有关Servers、frameworks及更多信息的下拉列表。插件
BuiltWith并不老是可以完美运行,全部,若是你确实须要知道一个网站是用什么技术建立的,你应该用一个更强大的工具来作一些跟进调查(如 Chrome开发者工具)。可是,它依然是一个能够快速知足你的好奇心并给你指引正确方向的快速方法。设计
JSONVIEW调试
默认状况下,Chrome并不会格式化选项卡中JavaScript Object Notation (JSON)文件。这看起来彷佛并不重要,但当你的WEB应用中有不少JSON的时候,你在调试的时候可能就会常常须要查看JSON数据。
当你安装了JSONView这个扩展,JSON就会被格式化的显示,使得它更加易读。
PAGESPEED INSIGHTS
PageSpeed Insights其实是一个第一方的扩展,由于它是由Google开发的。和其余扩展须要在工具栏添加一个按钮的形式不一样,这个扩展向Chrome开发者工具添加了一个标签。
PageSpeed提供的一些功能是复制的DevTools Audits panel。然而,一个web页面不可能加载的太快。它提供了一些加快页面加载速度的建议。
RESPONSIVE INSPECTOR
Responsive Inspector扩展是一个由Adobe的开发者做为辅助项目开发的。这个扩展能够提取任何样式表中的媒体查询,并把他们显示在一个交互式的图表中。
点击图表中的任何高亮的栏均可以从新调整浏览器使其适应特定媒体的大小,以便你能够看到断点看起来像什么。你也能够经过点击右侧的圆形代码按钮来查看上下文的媒体查询。
我还有其余遗漏的吗?
高质量的Chrome扩展是很难找到的。若是我这里缺乏了哪一个你认为必不可少的,请在评论中告诉我!
译者:Specs 时间:2014-01-27 Blog:http://www.9iphp.com/ E-mail:specs@9iphp.com