自动化测试辅助工具——Firebug

安装Firebug插件

安装Firebug插件的操作步骤如下：

（1）单击浏览器地址栏区域最右侧的按钮，在浏览器弹出的弹层，单击“附加附件”。

                               

（2）Firefox浏览器显示出“附加组件页面”，在页面最右侧的组件搜索框中输入“firebug”，并单击放大镜图标按钮。浏览器显示出Firebug插件的相关信息。

（3）点击“安装”按钮，firefox会自动下载和安装Firebug插件，安装完成后，在插件管理页面中会显示出“禁用”和“移除”两个按钮。

Firebug插件的使用

启动Firebug插件

1、启动Firefox浏览器。

2、在Firefox浏览器工具栏的最右侧区域单击Firebug插件图标进行启动。

                        

3、另一种方法则是，在显示Firefox浏览器的界面时，直接按F12启动。

Firebug插件常用功能

1、Firebug插件的配置菜单

       启动Firebug插件后，单击Firebug图标后，会弹出Firebug插件的配置菜单。通过改变配置菜单项设置可以对Firebug插件进行自定义设置，如停用Firebug，隐藏Firebug，改变Firebug的界面位置等。

2、Firebug插件查看功能的使用实例

（1）、在Firefox浏览器中打开http://www.baidu.com网页。打开Firebug插件。

（2）、单击“查看”按钮。

（3）、在百度页面的链接、按钮或者输入框上方悬浮鼠标，在Firebug中会高亮显示余页面元素对应的HTML代码。通过这样的方法，用户能轻松找到页面元素对应的HTML代码，这对于精确定位页面元素非常有帮助。

3、HTML面板的使用实例

（1）、在Firefox浏览器中打开http://www.baidu.com网页。打开Firebug插件。

（2）、单击Firebug中的HTML标签栏。

（3）、Firebug会在HTML标签下显示该网页的html代码。

（4）、使用鼠标在HTML代码区域进行悬浮，可以看到百度首页的页面元素被高亮显示。这样可以知道HTML代码在页面上显示的对应元素以及所在位置。

4、其他标签栏的作用概述tab

• CSS：此tab页会显示页面的css样式表代码
• 控制台：用于记录日志、概览、错误提示和执行命令行，同时也用于Ajax的调试；
  
• 脚本：此tab会显示页面的JavaScript代码。
• DOM：此tab会显示页面的DOM属性。
• 网络：此tab显示页面产生网络请求所发生的耗时。
• Cookies：此tab显示页面产生的Cookie信息。