[原]Firebug常用功能总结

1、HTML 实时编辑：

    选择你要更改Element ，然后单击功能区第一行的“Edit ”按钮或者直接将鼠标移动到要修改的Element 上，单击鼠标右键，选择“Edit HTML.. ”，这时候，源代码区域将切换到编辑状态，你可以随意的修改你选择的源代码了。改完再按一下”Edit” 就可以返回查看状态了。

 

2、CSS 实时编辑

2.1 选中页面上某元素的时候，在HTML 的窗口的右边那个就是该元素的CSS ，连属于哪个文件的也有标出来。可以对这些CSS 进行实时的编辑！而在Layout 那里也可以调整该Element 的margin 、border 、padding 和相对位置

2.2 Firebug 允许你关闭CSS 中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。“ 关闭” 一条语句的方法是，在该语句的左边点击，会出现一个红色的turnoffselector.gif 禁止标志。该语句就会变灰。再次点击，该语句就会恢复。

 

3、JavaScript 调试
    设置断点之后，重新刷新下页面，在脚本的那个框的右上角就有几个可以调试的按钮，单步执行，单步跳过之类的。。在右边的小窗口可以查看变量的值

 

4、DOM 对象查看
    如果对象太多可以使用右上角的搜索框

 

5、网络详细请求和回应
   可以看到某个请求的参数等等详细的信息

6 、强大的firebug 命令行API

6.1 可以测试下JS 代码执行的时间
在代码开头加入：console.time(“test”);
代码末尾加入：console.timeEnd(“test”);
代码运行后就可以在控制台那里看到输出：test=xxxms

6.2 如 果想知道某个函数是从哪里被调用的，可以在函数的末尾加入：
Console.trace();

6.3 列 出某个对象的所有属性
console.dir(object)

7、另外，在IE 下也有精简版的firebug

8、详细可以参考： http://blog.csdn.net/tianxiaode/archive/2007/09/02/1769152.aspx