FireBug插件使用教程.doc

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标签上移动时，页面会相应在当前标