Firefox扩展工具：Firebug调试经验与技巧

不了解的同学先“点这里”看看什么是Firebug。简单来说，Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。

我们先到Firebug的主页上下载最新的版本装上，下面开始调试：

1、查看、编辑HTML元素及其CSS

安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：

或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12

打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：

之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。

同时在Firebug的右侧是该元素对应的CSS样式，如下图：

图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板：

上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。