Firebug介绍及使用技巧

一、介绍

Firebug是网页浏览器Firefox下的一款开发调试工具。安装firebug后在浏览器的插件工具栏中（上方）会有一个小甲虫的图标。 F12打开和关闭Firebug窗口。

 

二、FireBug窗口功能：

控制台：JavaScript命令行操作、显示JS错误信息、提示信息、日志信息，右侧可写自己的JS命令。
HTML：显示页面的HTML源码。
CSS：编辑页面的CSS源码。
脚本：显示页面脚本和调试。
DOM：显示页面对象和DOM属性。
网络：显示页面下载和花费时间。
Cookies：显示页面请求的Cookies，及查看和修改。

提示

每个功能标签可以通过点击下拉菜单设置为“启用”或“停用”。
小甲虫可以设置显示或不显示某些功能标签。
功能标签右侧搜索框可以进行相应的搜索。

 

三、HTML功能：

定位元素
1、Ctrl+Shift+C 快速定位元素
2、在网页选中元素，右键点击“使用Firebug查看元素”也可以定位元素
3、点击左上第二个图标，在页面选择要定位的元素
4、右上角搜索框可以输入要定位的元素
编辑元素
1、双击要编辑的html元素
2、选中要编辑的元素右键点击“编辑HTML”
处理css样式
1、在右侧样式标签可以查看元素的样式。
2、双击相应的样式可以进行修改。
3、点击样式前面的启用/禁用图标可以启用/禁用样式。
4、双击样式的结束位置可以添加一行新样式。
5、双击样式按delete即可删除样式。
6、鼠标上下键调整css避属性数字的大小（Ctrl慢调、Shift快调）。
7、也可以点击css样式地址，在源码中进行修改。

 

四、网络功能：

1、分类别的查看下载文件和http请求
2、可以查看http请示的详细信息，是否成功、是否缓存、请求参数、响应的结果等
3、监控ajax的请求详细信息(XHR)

 

五、控制台功能：

1、利用console向控制台输出一些log及其它调试信息，控制台可以显示出这些信息，常用consolog函数如下:
console.log();
console.info();
console.dir();
console.debug();
console.warn();
console.error();
console.group();
console.groupEnd();
console.time();
console.timeEnd();
2、在控制台输入js代码，可以执行输入的js代码
3、输入相应的js代码内容后点击"Tab"自动提示

 

六、脚本功能：

1、查看JS代码，设置断点（点击左侧行号即可）
2、调试js功能代码
F8：继续
F10:单步跳过
F11：单步进入
Shift+F11：单步退出
3、console.trace()可以知道函数如何被调用。

 

七、其它使用技巧：

1、点击所有可以点击的地方，发现其它功能
2、所有点击的地方右键功能
3、所有下拉菜单功能
4、小甲虫的菜单功能
5、各处浏览器及开发人员工具结合使用