磨刀不误砍柴功，作为一名前端开发人员，能有一套切实有效且操作熟练的前端开发工具，那将能大大地提升工作效率。接下来我给大家介绍一系列前端开发 相关的免费工具，涉及到网页分析、问题诊断到资源优化等各个方面，各位可以选择适合自己的，让他们真正成为我们的利器。该主题为一系列的文章，本篇介绍网 页分析工具。

Firebug

可谓大名鼎鼎，凡是涉及到前端开发的IT人应该都或多或少用过。（什么？你没有！面壁思过去吧……）Firebug是Firefox的一个插件，专 为前台开发工程师量身定制的网页分析、诊断、调试工具。相比其他浏览器如Chrome和IE都把对应的开发工具默认集成到分发包中，Firebug需要自 己另外安装。用Firefox浏览器打开这个地址：https://addons.mozilla.org/en-US/firefox/addon/firebug/，点击页面中的“Download Now”按钮，就能自动安装。

详细功能及用法，见Firebug官方站点。

Chrome Developer Tools

Chrome Developer Tools之与Chrome就像Firebug与Firefox的关系，不同的是Chrome Developer Tools是集成到Chrome的分发版中，无须另外安装。F12快捷键可以调出该工具。由于Chrome的势头已经超过Firefox，因此这个工具也 应该是人人知晓。

YSlow

YSlow是Yahoo!开发的一个免费开源工具，旨在帮助开发人员分析页面存在的性能问题。该工具的工作原理基于Yahoo!的总结出来的影响网页性能的35个规则。 YSlow定义了3套规则集，分别针对不同规模的网页，你可以根据自己网页的特点选择相应的规则集来进行诊断。YSlow运行完成后会给出一个总的评价， 如A表示你的页面已经非常出色，无须优化了；B表示也不错，但还有改进的空间，一次类推，最差是F。此外，YSlow还给出了具体哪些点违反了哪条规则， 而且还会告诉你该怎么改。YSlow提供了除了IE以外的主流浏览器的插件，包括Firefox，Chrome，Safari和Opera。

PageSpeed

Google出品必属精品，PageSpeed也 应当如此。类似YSlow，其工作原理也是基于预定义的影响网页性能的规则来对页面进行评估。不同的是这些规则是Google自己总结的，总共27条，按 照重要程度归为高中低三类。PageSpeed给出的总评是一个满分为100分的分数，不知道有没有页面能得100的，我的页面现在估计就60分左右。除 总分之外，也类似YSlow给出了违反各个规则的点，以及修改方法。PageSpeed有Firefox和Chrome的插件。

类似上面介绍的分析网页的工具还有很多，比如微软的Visual Round Trip Analyser，在线版的分析工具WebPageTest，Show Slow-将YSlow和PageSpeed的结果集成到一块用图表的形式展示出来，还有收费版本的BrowserMob。

愚以为工具不在于多，在于精。熟练运用本文介绍的4个工具，基本不需要其他类似页面分析诊断的工具了。