Javascript的调试利器：Firebug使用详解(一)

 Javascript 的调试，是开发 Web 应用尤其是 AJAX 应用很重要的一环，目前对 Javascript 进行调试的工具很多，我比较喜欢使用的是 Firebug 。 Firebug 是 Joe Hewitt 开发的一套与 Firefox 集成在一起的功能强大的 web 开发工具，可以实时编辑、调试和监测任何页面的 CSS 、 HTML 和 JavaScript 。

本文主要是为初学者介绍一下 Firebug 的基本功能与如何使用 Firebug 。由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！

 

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	打开捐助 Firebug 页面。
表 1