jquery的调试利器Firebug使用详解.doc

Javascript 的调试,是开发 Web 应用尤其是 AJAX 应用很重要的一环,目前对 Javascrip t 进行调试的工具很多,我比较喜欢使用的是 Firebug 。 Firebug 是 Joe Hewitt 开发的一套与 Firefox 集成在一起的功能强大的 web 开发工具,可以实时编辑、调试和监测任何页面的 CSS 、 HTML 和 JavaScript 。本文主要是为初学者介绍一下 Firebug 的基本功能与如何使用 Firebug 。由于本人水平与能力有限,在文章中的可能会有很多错误与遗漏,希望大家能谅解和指正! <!--[if !supportLists]-->1 、<!--[endif]--> 安装 Firebug 是与 Firefox 集成的,所以我们首先要安装的事 Firefox 浏览器。安装好浏览器后,打开浏览器,选择菜单栏上的“工具”菜单,选择“附加软件”,在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的 search 输入框中输入“ firebug ”。等搜索结果出来后点击 Firbug 链接(图 1-1 红色圈住部分)进入 Firebug 的下载安装页面。<!--[if !vml]-- > <!- -[endif]--> 图 1-1 在页面中点击 Install Now (图 1-2 )按钮。<!--[if !vml]--> <!--[endif]--> 图 1-2 在弹出窗口(图 1-3 )中等待 3 秒后单击“立即安装”按钮。<!--[if !vml]--> <!-- [endif]--> 图 1-3 等待安装完成后会单击窗口(图 1-4 )中的“重启 Firefox ”按钮重新启动 Firefox 。<!--[if !vml]-- > <! --[endif]--> 图 1-4 当 Firefox 重启完后我们可以在状态栏最右边发现一个灰色圆形图标( <!--[if !vml]-- > <!--[endif]--> ),这就表示 Firebug 已经安装好了。灰***标表示 Firebug 未开启对当前网站的编辑、调试和监测功能。而绿色( <!--[if !vml]--> <!--[endif]-- > )则表示 Firebug 已开启对当前网站进行编辑、调试和监测的功能。而红***标( <!-- [if !vml]--> <!--[endif]--> )表示已开启对当前网站进行编辑、调试和监测的功能,而且检查到当前页面有错误,当前图标表示有 5 个错误。<!--[if !supportLists]-->2 、<!--[endif]--> 开启或关闭 Firebug 单击 Firebug 的图标或者按 F12 键你会发现页面窗口被分成了两部分,上半部分是浏览的页面,下半部分则是 Firebug 的控制窗口(图 2-1 )。如果你不喜欢这样,可以按 CTRL+F12 或在前面操作后单击右上角的上箭头按钮,弹出一个新窗口作为 Firebug 的控制窗口。<!--[if !vml]-- > <!--[endif]--> 图 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 的选项也会不同,搜索框的搜索方式也会不同。<!--[if !vml]-- > <!--[endif]--> 图 2-2 要关闭 Firebug 控制窗口单击功能区最右边的关闭图标或按 F12 键就行了。如果要关闭 Firebug 的编辑、调试和监测功能,则需要单击功能区最左边的臭虫图标,打开主菜单,选择“ Disable Firebug ”或“ Disable Firebug for xxxxx ”。<!--[if !supportLists]-->3 、<!--[endif]-->Firebug 主菜单单击功能区最左边的臭虫图标可打开主菜单(图 3-1 ),其主要功能描述请看表 1。<!-