Firebug的基本功能及如何使用Firebug.doc

在文章中的可能会有很多错误与遗漏,
希望大家能谅解和指正!

1、安装
Firebug是与Firefox集成的,
所以我们首先要安装的事Firefox浏览器。
安装好浏览器后,
打开浏览器,
选择菜单栏上的“工具”菜单,
选择“附加软件”,
在弹出窗口中点击右下角的“获取扩展”链接。
在打开的页面的search输入框中输入“firebug”。
等搜索结果出来后点击Firbug链接(图1-1红色圈住部分)进入Firebug的下载安装页面。

图1-1

在页面中点击Install Now(图1-2)按钮。

图1-2

在弹出窗口(图1-3)中等待3秒后单击“立即安装”按钮。

图1-3

等待安装完成后会单击窗口(图1-4)中的“重启 Firefox”按钮重新启动Firefox。

图1-4

当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标(),
这就表示Firebug已经安装好了。
灰***标表示Firebug未开启对当前网站的编辑、调试和监测功能。
而绿色()则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。
而红***标()表示已开启对当前网站进行编辑、调试和监测的功能,
而且检查到当前页面有错误,
当前图标表示有5个错误。

2、开启或关闭Firebug
单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分,
上半部分是浏览的页面,
下半部分则是Firebug的控制窗口(图2-1)。
如果你不喜欢这样,
可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮,
弹出一个新窗口作为Firebug的控制窗口。

图2-1

从图2-1中我们可以看到,
因为我们开启Firebug的编辑、调试和监测功能,
所以目前只有两个可以选择的链接:“Enable Firebug”与“Enable Firebug for this web site”。
如果你想对所有的网站进行编辑、调试和检测,
你可以点击“Enable Firebug”开启Firebug,
则以后无论浏览任何网站,
Firebug都处于活动状态,
随时可以进行编辑、调试和检测。
不过一般的****惯我们只是对自己开发的网站进行编辑、调试和检测,
所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。
开启Firebug窗口(图2-2)后,
我们可以看到窗口主要有两个区域,
一个是功能区,
一个是信息区。
选择功能区第二行的不同标签,
信息区的显示会有不同,
Options的选项也会不同,
搜索框的搜索方式也会不同。

图2-2

要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。
如果要关闭Firebug的编辑、调试和监测功能,
则需要单击功能区最左边的臭虫图标,
打开主菜单,选择“Disable Firebug”或“Disable Firebug for xxxxx”。

3、 Firebug主菜单

单击功能区最左边的臭虫图标可打开主菜单(图3-1),
其主要功能描述请看表1。

图3-1


菜单选项
说明
Disable Firebug
关闭/开启Firebug对所有网页的编辑、调试和检测功能
Disable Firebug for xxxxx
关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能
Allowed Sites
设置允许编辑、调试和检测的网站
Text Size:Increase text size
增大信息区域显示文本的字号
Text Size:Decrease text size
减少信息区域显示文本的字号
Text Size:Normal text size
信息区域以正常字体显示
Options:Always Open in New Window
设置Firebug控制窗口永远在新窗口打开
Show Preview tooltips
设置是否显示预览提示。
Shade Box Model
当前查看状态为HTML,鼠标在HTML element标签上移动时,页面会相应在当前标签显示位置显示一个边框表示该标签范围。这个选项的作用是设置是否用不同颜色背景表示标签范围。
Firebug Website..
打开Firebug主页。
Documentation..
打开Firebug文档页。
Discussion Group
打开Firebug讨论组。
Contribute