2.3.2 利用Firebug测试网页
Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和AJAX的得力助手。它的作用是给Web页面开发者提供一个很好的测试前端页面代码的工具。它深受网页开发者或网页布局爱好者的喜爱。用DIV＋CSS和HTML所写的页面代码，都可以用Firebug来测试和调试。
1.安装Firebug
Firebug是与Firefox浏览器集成的，所以首先要安装的是Firefox浏览器。安装好Firefox浏览器后，打开Firefox浏览器，在工具菜单中选择“附加组件”选项，如图2-25所示。在打开的附加组件管理器页面的右侧搜索栏中输入“Firebug”，如果还没有安装Firebug，就会出现图2-26所示图标，单击该图标进行安装。等待安装完毕，重启Firefox浏览器。
图2-25 添加组件
图2-26 Firebug安装图标
2.Firebug的主要功能
在安装好Firebug插件之后，先用Firefox浏览器打开需要测试的页面，然后单击右上方的“爬虫”按钮
或按F12键唤出Firebug插件，它会将当前页面分成上、下两个框架，如图2-27所示。
图2-27 Firebug界面
从图中可以看到，Firebug有几个主要的Tab按钮，下面将简单介绍这几方面的功能。
1）JavaScript控制台
JavaScript控制台能够显示当前页面中的JavaScript错误以及警告，并提示出错的文件和行号，以方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。
2）查看和修改HTML
首先看到的是经过格式化的HTML代码，它有清晰的层次，用户能够方便地分辨出每一个标签之间的从属并行关系。用户还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果。
3）CSS调试
Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。用户可以在CSS查看器中直接添加、修改、删除CSS样式表属性，并在当前页面中能直接看到修改后的结果。
图2-28所示为修改页面中的文字大小。
图2-28 在CCS查看器中修改页面中的文字大小
4）JavaScript调试器
JavaScript调试器占用空间不大，具有单步调试、设置断点、变量查看等功能。如果一个网站已经建成，然而它的JavaScript有性能上有问题或者不是太完美，则可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步一步排除问题。图2-29所示为JavaScript调试器。
图2-29 JavaScript调试器
5）DOM查看器
使用Firebug的DOM查看器，能方便地浏览DOM的内部结构，快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值。DOM查看器还有自动完成功能，当输入“document.get”之后，按Tab键就能补齐为document.getElementById，非常方便。
6）网络状况监视器
Firebug的网络状况监视器能将页面中的CSS、JavaScript以及网页中引用的图片载入所消耗的时间以矩形图呈现出来，进而对网页进行调优。