Firebug使用详解.doc

Javascript的调试利器:Firebug使用详解(转)
(转:天晓得的专栏)Javascript的调试,是开发Web应用尤其是AJAX应用很重要的一环,目前对Javascript进行调试的工具很多,我比较喜欢使用的是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。
 
<!--[if !vml]-