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