为什么使用Firebug

本文为“为什么系列”第二篇。以后还会有连载，敬请关注。

如果要说Firefox最棒的功能是什么，我会毫不犹豫的说：因为它有Firebug。Firebug并不是Firefox自带的组件，仅仅是一个扩展，但正式因为这么一个扩展，让Firefox成为了Web前端开发者的利器。著名Web开发工程师Foremire曾经是这样评价Firebug的：

如果我的Firefox只能装一个扩展，那么它一定是Firebug。我刚开始接触Web前端就是从认识Firebug开始的，它告诉了我发生那血绚丽HTML页面背后的一切秘密。

Firebug的每周平均下载量200k，累计下载量15,459k(截至到本文发布)，连续多年被Mozilla Addon Center评为五星级推荐扩扎。这些数据足以证明Firebug在Web前端开发界的影响。如果你现在正在从事与Web前端开发，或者对Web前端具有非常大的兴趣，猛点这里，开始你的Firebug之旅。

呼来唤去，弹指一见

安装好Firebug后(当然，你首先需要安装Firefox)，你的Firefox并没有太大的变化，只是在状态栏下多了一只可爱的小虫(没错，那就是Buggy)。点击它，或者按下F12，Firebug就从浏览器的下面出现了。嫌它太占空间？点击右上角的最大化按钮，Firebug会出现到一独立窗口。不想用了，再按一下F12，Firebug马上消失。学习Firebug的第一件事就是学会按F12。

HTML检测与编辑

准确的说，Firebug检测、修改的不是HTMl，而是DOM树。屏幕前聪明的你一定可以想到：哇塞，这样我就可以随意修改页面了。这一点是不假，但是这些修改都是在内存中的，不能作为编辑器用。如果要编辑，还是老老实实用文本编辑器吧。(这里不建议使用所见即所得的开发环境，因为它永远无法和真实的浏览器环境相比。学习前端开发，最重要的就是学习HTML艺术之美。)打开Firebug后，你就可以看到一颗鲜活的DOM树。你可以从根一级一级进行展开，如下图所示。

当鼠标移到某一个DOM元素的时候，如果该元素可见，显示去的背景就会发生神奇的变化，告诉你这一块区域就是你当前所选。如果你对页面上的元素感兴趣，可以点击Inspect，然后将鼠标移动到显示区，点击目标元素，下面的DOM树的相应部分也被选中。需要编辑DOM树。非常简单，直接点击元素，自动出现编辑框。

CSS层次支持

学习CSS,最基础的就是理解CSS Box Model，即每一个块级元素的盒状模型。Firebug通过一种Box model shading的方法，让你能够清楚地看到每一个元素如何在页面上排布，布局引擎优势如何处理这些元素的。Firebug能够做到这一点，就是因为它和Firefox的布局引擎Gecko作了深层次的Hook。每一个块级元素具备的四个盒状模型属性：offset, margin, border, padding分别以不同的颜色进行显示。想精确了解每一个盒状模型属性的值？非常简单，在DOM树的右侧有一个Layout标签，里面有所有的信息。所有的属性都精确到了像素这一级别，当然这些属性也可以进行在线编辑。

在这里八卦一下，当初我学习CSS就是从Firbug开始，学会的都是W3C标准。后来把做好的页面拿到MS IE下进行测试，才发现你丫是多么的变态。再次奉劝一下Web前端的初学者，为了你们的未来，也为了中国Web界的未来，请学习标准，远离IE。

监视网络

最基本的功能，就是检查浏览器打开每一个页面究竟发生了多少次HTTP请求，每次请求的响应时间、请求的大小以及每一次请求的响应结果。这些对于Web程序性能的优化非常有帮助。通过这些数据，你可以了解到服务器的响应性能、以及目前的网络连接情况。关于网络性能方面，Yahoo做了一个针对Firebug的扩展Yslow，对这一部分功能进行了增强。

随着Ajax应用的增多，Web程序的网络通信变得异常复杂。举例来说，看上去界面平静的Gmail，其背后却在和服务器不停地发生各种异步通信。Firebug可以完美地捕捉到每一次的XMLHttpRequest异步请求。另外，展开这些请求数据，你还可以看到每一次HTTP请求的方法(GET/PUT/POST)，已经HTTP头部的其它信息。这些信息对于前端调试都是非常有帮助。上次我拿校内开涮，就是用到了这个功能。

JavaScript在线调试

如果你正在被JavaScript开发过程中出现的问题而困扰，Firebug可以帮你解决。Firebug与Firefox的JavaScript解析引擎(FF3.0及以前版本用的是SpiderMonkey，FF3.1/3.5开始使用TraceMonkey)完美整合，可以实现在线调试，支持的功能包括断点(包括条件断点)、单步、监视、堆栈检查等。有了这些功能，调试JavaScript还会是一件难事吗？