Firebug常用自带函数：
|
命令 |
说明 |
|
$(id) |
通过id返回Element。 |
|
$$(selector) |
通过CSS选择器返回Element数组。 |
|
$x(xpath) |
通过xpath表达式返回Element数组。 |
|
dir(object) |
列出对象的所有属性，和在DOM标签页查看该对象的是一样的。 |
|
dirxml(node) |
列出节点的HTML或XML的源代码树，和在HTML标签页查看改节点一样。 |
|
cd(window) |
默认情况下，命令行相关的是顶层window对象，使用该命令可切换到frame里的window独享。 |
|
clear() |
清空信息显示区，和单击按钮Clear功能一样。 |
|
inspect(object[, tabName]) |
监视一个对象。tabName表示在那个标签页对该对象进行监视，可选值为“html”、“css”、“script”和“dom”。 |
|
keys(object) |
返回由对象的属性名组成的数组。 |
|
values(object) |
返回由对象的属性值组成的数组。 |
|
debug(fn) |
在函数的第一行增加一个断点。 |
|
undebug(fn) |
移除在函数第一行的断点。 |
|
monitor(fn) |
跟踪函数fn的调用。 |
|
unmonitor(fn) |
不跟踪函数fn的调用。 |
|
monitorEvents(object[, types]) |
跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。 |
|
unmonitorEvents(object[, types]) |
不跟踪对象的事件。Types的可选值为“composition”、 “contextmenu”、 “drag”、 “focus”,、“form”、“key”、 “load”、“mouse”、“mutation”、“paint”、“scroll”、“text”、“ui”和“xul”。 |
|
profile([title]) |
开始对脚本进行性能测试，可选参数title将作为测试结果的标题。 |
|
profileEnd() |
结束脚本性能测试。 |
三、 HTML查看器
单击功能区第二栏的“HTML”标签可切换到源代码查看功能。虽然Firefox也提供了查看页面源代码的功能，但它显示的只是页面文件本身的源代码，通过脚本输出的HTML源码是看不到。而Firebug则是所见即所得，是最终的源代码（包括运行时JS自动生成的Html标签，这些是在FF自带Html查看器或是IE的“查看页面源码”里看不到的）。
信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到HTML Element中的CSS定义、布局情况和DOM结构。
在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显示区域。如将鼠标放到上图<table id=”1” cellspacing…….时，页面相应位置被方块选中
如果选择“查看”，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。
此外当我的源代码很多，而且有些区域在页面中不方便鼠标指定时，可以利用搜索功能查找
编辑页面的Html元素有几种方式：
1.单击源码标签部分，在弹出的编辑框里进行编辑，按Tab可以切换需要编辑的属性
2. 后单击功能区第一行的“编辑”按钮或者直接将鼠标移动到要修改的Element上，单击鼠标右键，选择“Edit HTML.”进行编辑
3. 修改元素的CSS，选择该Element，然后在右边的窗口选择“样式”标签，这里显示的就是当前Element的CSS定义了。我们在这里可以对CSS定义进行添加、编辑、删除、禁止等操作。可以单击右键选择操作，也可以单击元素前面的圈禁用，单击元素体进行编辑。Tab可以切换要编辑的元素。
4. 修改元素的布局（margin、border、padding），Firebug提供一个可视化编辑器，我们将右边的区域切换到“布局”标签，你会看到一个盒子模型，里面从外到里通过不同的线和颜色划分出了offset、margin、border、padding和内容五个区域，里面4个区域在每个边上都有1个数值，表示该方向上的调整值。
四、 Css查看器
将功能区第二行的标签切换到“CSS”，在这里我们可以查看页面中所有的CSS定义，包括链接的CSS文件。通过功能区的文件选择按钮可以选择不同的含有CSS的文件
CSS的定义的编辑这里就不再说明了，这个可以参考HTML的“Style”操作。
“Edit”按钮功能和HTML的“Edit”功能类似。
五、 脚本调试
将功能区第二行的标签切换到“脚本”，在这里我们可以对页面中所有的脚本进行调试，包括链接的脚本。和CSS一样，可以通过文件选择按钮选择不同的脚本文件。
六、 DOM查看器
将功能区第二行的标签切换到“DOM”可俺层次查看整个页面的DOM结构。通过“Options”菜单可自定义选择查看用户自定义属性（Show User-defined Properties）、用户自定义函数（Show User-defined Functions）、DOM属性（Show DOM Properties）、DOM函数(Show DOM Functions)或DOM常数(Show DOM Constants)等内容。
