一、介绍
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、各处浏览器及开发人员工具结合使用