FireBug调试

J a v a s c r i p t的调试利器：F i r e b u g使用详解 收藏J a v a s c r i p t的调试，是开发W e b应用尤其是A J A X应用很重要的一环，目前对J a v a s c r i p t进行调试的工具很多，我比较喜欢使用的是F i r e b u g。

F i r e b u g是J o e H e w i t t开发的一套与F i r e f o x集成在一起的功能强大的w e b开发工具，可以实时编辑、调试和监测任何页面的C S S、H T M L和J a v a S c r i p t。

本文主要是为初学者介绍一下F i r e b u g的基本功能与如何使用F i r e b u g。

由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！1、安装F i r e b u g是与F i r e f o x集成的，所以我们首先要安装的事F i r e f o x浏览器。

安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。

在打开的页面的s e a r c h输入框中输入“f i r e b u g”。

等搜索结果出来后点击F i r b u g链接（图1-1红色圈住部分）进入F i r e b u g的下载安装页面。

图1-1在页面中点击I n s t a l l N o w（图1-2）按钮。

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

等待安装完成后会单击窗口（图1-4）中的“重启 F i r e f o x”按钮重新启动F i r e f o x。

图1-4当F i r e f o x重启完后我们可以在状态栏最右边发现一个灰色圆形图标（ ），这就表示F i r e b u g已经安装好了。

灰色图标表示F i r e b u g未开启对当前网站的编辑、调试和监测功能。

而绿色（ ）则表示F i r e b u g已开启对当前网站进行编辑、调试和监测的功能。

而红色图标（ ）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。

2、开启或关闭F i r e b u g单击F i r e b u g的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是F i r e b u g的控制窗口（图2-1）。

如果你不喜欢这样，可以按C T R L+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为F i r e b u g的控制窗口。

图2-1从图2-1中我们可以看到，因为我们开启F i r e b u g的编辑、调试和监测功能，所以目前只有两个可以选择的链接：“E n a b l e F i r e b u g”与“E n a b l e F i r e b u g f o r t h i s w e b s i t e”。

如果你想对所有的网站进行编辑、调试和检测，你可以点击“E n a b l e F i r e b u g”开启F i r e b u g，则以后无论浏览任何网站，F i r e b u g都处于活动状态，随时可以进行编辑、调试和检测。

不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测，所以我们只单击“E n a b l e F i r e b u g f o r t h i s w e b s i t e”开启F i r e b u g就行了。

开启F i r e b u g窗口（图2-2）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。

选择功能区第二行的不同标签，信息区的显示会有不同，O p t i o n s的选项也会不同，搜索框的搜索方式也会不同。

图2-2要关闭F i r e b u g控制窗口单击功能区最右边的关闭图标或按F12键就行了。

如果要关闭F i r e b u g的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“D i s a b l e F i r e b u g”或“D i s a b l e F i r e b u g f o r x x x x x”。

3、F i r e b u g主菜单单击功能区最左边的臭虫图标可打开主菜单（图3-1），其主要功能描述请看表1。

图3-1菜单选项 说明D i s a b l e F i r e b u g关闭/开启F i r e b u g对所有网页的编辑、调试和检测功能D i s a b l e F i r e b u g f o r x x x x x关闭/开启F i r e b u g对x x x x x网站的编辑、调试和检测功能A l l o w e d S i t e s设置允许编辑、调试和检测的网站T e x t S i z e：I n c r e a s e t e x t s i z e增大信息区域显示文本的字号T e x t S i z e：D e c r e a s e t e x t s i z e减少信息区域显示文本的字号T e x t S i z e：N o r m a l t e x t s i z e信息区域以正常字体显示设置F i r e b u g控制窗口永远在新窗口打开O p t i o n s：A l w a y s O p e n i n N e wW i n d o wS h o w P r e v i e w t o o l t i p s设置是否显示预览提示。

S h a d e B o x M o d e l当前查看状态为H T M L，鼠标在H T M Le l e m e n t标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。

这个选项的作用是设置是否用不同颜色背景表示标签范围。

F i r e b u g W e b s i t e..打开F i r e b u g主页。

D o c u m e n t a t i o n..打开F i r e b u g文档页。

D i s c u s s i o n G r o u p打开F i r e b u g讨论组。

C o n t r i b u t e打开捐助F i r e b u g页面。

表14、控制台（C o n s o l e）单击功能区第二栏的“C o n s o l e”标签可切换到控制台（图4-1）。

控制台的作用是显示各种错误信息（可在O p t i o n s里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击P r o f i l e对脚本进行性能测试。

控制台分两个区域，一个是信息区，一个是命令行，通过O p t i o n s菜单的“L a r g e r C o m m a n d L i n e”可改变命令行位置。

图4-1O p t i o n s菜单的选项请看表2。

菜单选项 说明S h o w J a v a S c r i p t E r r o r s显示脚本错误。

S h o w J a v a S c r i p t W a r n i n g s 显示脚本警告。

S h o w C S S E r r o r s显示C S S错误。

S h o w X M L E r r o r s显示X M L错误。

S h o w X M L H t t p R e q u e s t s显示X M L H t t p R e q u e s t s。

L a r g e r C o m m a n d L i n e将命令行显示从控制窗口底部移动右边，扩大输入区域。

表2单击“C l e a r”按钮可清除控制台的控制信息。

5、页面源代码查看功能单击功能区第二栏的“H T M L”标签可切换到源代码查看功能（图5-1）。

虽然F i r e f o x也提供了查看页面源代码的功能，但它显示的只是页面文件本身的源代码，通过脚本输出的H T M L 源码是看不到。

而F i r e b u g则是所见即所得，是最终的源代码。

图5-1我们来看一个例子，文件源代码如下：<!D O C T Y P E H T M L P U B L I C"-//W3C//D T D H T M L4.01//E N""h t t p://w w w.w3.o r g/T R/h t m l4/s t r i c t.d t d"><h t m l><h e a d><t i t l e>简单的例子</t i t l e><m e t a h t t p-e q u i v="c o n t e n t-t y p e"c o n t e n t="t e x t/h t m l;c h a r s e t=u t f-8"><s t y l e>#d i v1{b a c k g r o u n d:r e d;w i d t h:100p x;h e i g h t:100p x;}#d i v2{b a c k g r o u n d:b l u e;w i d t h:100p x;h e i g h t:100p x;m a r g i n:10p x;p a d d i n g:10p x;b o r d e r:5p x s o l i d b l a c k;c o l o r:w h i t e;}#d i v3{b a c k g r o u n d:y e l l o w;w i d t h:50p x;h e i g h t:50p x;m a r g i n-l e f t:25p x;}</s t y l e></h e a d><b o d y s c r o l l="n o"><d i v i d="d i v1">方块一</d i v><d i v i d="d i v2">方块二</d i v><s c r i p t>d o c u me n t.g e t E l e m e n t B y I d('d i v1').i n n e r H T M L+='<d i v i d="d i v3">方块三</d i v>';</s c r i p t></b o d y></h t m l>在例子中我们通过J a v a S c r i p t在“d i v1”中加入了“d i v3”，在F i r e f o x中查看源代码你是看不到“d i v1”中包含有代码“<d i v i d="d i v3">方块三</d i v>”的，但是F i r e b u g中我们是可以看见的（图5-2选中部分）。