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 w

W i n d o w

S 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 L

e 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页面。

表1

4、控制台（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-1

O 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

我们来看一个例子，文件源代码如下：

"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">

简单的例子

#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;}

方块一

方块二

d o c u m

e 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+='方块三

';

在例子中我们通过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”中包含有代码“方块三”的，但是F i r e b u g中我们是可以看见的（图5-2选中部分）。

图5-2

从图5-1中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到H T M L E l e m e n t中的C S S定义、布局情况和D O M结构。

从图5-2中我们可以看到，源代码按D O M结构分层次显示的，通过层次折叠功能，我们就可以很方便分析代码。在功能区的第一行还根据你的选择，清晰的按子、父、根列出了当

前源代码的层次（图5-2红色部分），单击各部分，则会即刻转到该部分的源代码。

在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显

示区域，当选择。在图5-4中，鼠标正指向“d i v1”，而在页面中“d i v1”的显示区域上被

一个半透明的方块遮盖了。

图5-4

如果你把“I n s p e c t”按钮按下，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。在图5-5中，我们可以看到鼠标指针正指向“方块二”，而在源代码中可以看到，“方块二”的源代码“方块二”已被加亮显示（红

色部分）。如果你单击某个显示区域，则该区域的源代码会被选中。

图5-5

是不是很方便？方便是方便，但是我的源代码很多，而且有些区域在页面中不方便鼠标指定，怎么办？没关系，我们还有一个厉害武器，搜索功能。譬如我们知道某个H T M L E l e m e n t 的I D是“d i v2”，但在层层叠叠的源代码中不好找，在页面中鼠标也很难找到，那我们就在功能区的搜索框中输入“d i v2”，再看看源代码区域，“d i v2”被加亮显示出来了（图5-6红色部分）。在这个简单的例子可能看不出很好的效果，大家可以尝试一下把“d i v1”先折叠起来，然后在搜索框输入“d i v3”，你可以看到“d i v1”会自动展开，并将“d i v3”加亮

显示，如果还觉得不够理想，可以找一个源代码比较多的例子测试一下。

图5-6

除了通过按下“I n s p e c t”按钮，单击显示区域选择源代码，我们还可以通过单击源代码中的H T M L标记（开始或结束标记都可以）来选择。我们尝试一下把鼠标移动到H T M L标记，会发现鼠标指针变成了手的形状，这说明我们可以通过单击选择该源代码。选择源代码后，我们就可以通过右边的功能区查看、编辑和调试它的C S S定义和盒子模型（C S S盒子模型请参阅相关说明，这里就不再赘述了），还有一个很好的功能就是当外部编辑器修改了源代码（没有删除该源代码，只是修改），我们在浏览器重新加载页面后，选择的源代码不会改变，我们可以很方便的观察源代码的变化与效果。

有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换，一次又一次的刷新而感到懊恼？有了F i r e b u g你就不用再懊恼了。你可以直接在源代码中进行编辑，然后查看效果。如果只是修改已经存在的属性，例如要修改“d i v2”的内部文本，则直接将鼠标移动到文本上面，等鼠标指针换成“I”，单击即可进行编辑了。其它已存在的属性和属性值也可以这样直接进行编辑。如果要为某E l e m e n t添加属性，请将鼠标移动到该E l e m e n t上，等光标变为“I”的时候，单击鼠标右键，从菜单中选择“N e w A t t r i b u t e..”，在显示的编辑框

中输入你要添加的属性名称就可以了。

图5-7

图5-8

我们尝试一下为“d i v2”增加一个“o n c l i c k”属性，单击的结果是将“d i v2”的显示文

本修改为“单击”。把光标移动到“d i v2”上，然后单击鼠标右键，选择“N e w A t t r i b u t e..”

（图5-7），在编辑框中输入“o n c l i c k”，最后按一下回车键（图5-8），出现属性值输入

框后，输入“t h i s.i n n e r H T M L=’单击’”，回车后我们可以继续添加下一个属性，这次测试不需要，所以按E S C结束我们的输入。我们来检验一下修改结果，单击页面“d i v2”的区域（图5-9），“d i v2”的显示文本已修改为“单击”了，而源代码也改变了。有没有发现，“d i v2”被加亮显示了？这又是F i r e b u g的一个功能。只要我们通过页面中的操作修改了

E l e m e n t的属性，

F i r e b u g就会在源代码中通过加亮的方式指示当前操作修改那些属性值。譬如我们单击某个链接修改了一个i f r a m e里的s r c，那么这个s r c的属性值就会被加亮显示。 又譬如我们单击某个链接修改了一个i m a g e里的图像，那么它的s r c属性值也会被加亮显示。我们可以通过O p t i o n s菜单里的“H i g h l i g h t C h a n g e s”设置是否加亮显示改变。而“E x p a n d C h a n g e s”则是设置被改变的源代码折叠起来看不见时展开让它可见。而“S c r o l l C h a n g e s i n t o v i e w”则是源代码很多，被改变的源代码不在可视区域时，将被改变的源代码滚动到可视区域。

图5-9

有时候我们不单是要增加一两个属性，而是要做更多的修改，这怎么办呢？很简单，选择你要更改E l e m e n t，然后单击功能区第一行的“E d i t”按钮或者直接将鼠标移动到要修改的E l e m e n t上，单击鼠标右键，选择“E d i t H T M L..”，这时候，源代码区域将切换到编辑状态，你可以随意的修改你选择的源代码了。我们尝试修改一下“d i v2”，将被修改显示文本修改回“方块二”，我们选择“d i v2”，然后单击“E d i t”按钮（图5-10），将显示文本修改回“方块二”，然后再次单击“E d i t”按钮退出编辑状态，如果要放弃修改，可以按E S C 键退出。因为是所见即所得的，所以我们在修改的时候，页面会同时刷新显示。

图5-10

如果要修改E l e m e n t的C S S定义怎么办？很简单，选择该E l e m e n t，然后在右边的窗口选择“S t y l e”标签，这里显示的就是当前E l e m e n t的C S S定义了。我们在这里可以对C S S定义进行添加、编辑、删除、禁止等操作。我们尝试一下把“d i v2”的背景色禁止了看看。将鼠标移动到“b a c k g r o u n d”这行（图5-11），我们可以看到在这行的最右边会有一个灰色的禁止图标，只要单击这个禁止图标，就可以禁止了这个C S S属性了。我们单击这个图标看看效果，页面中的“d i v2”已经变成白色背景了，而禁止图标也变成红色，而文本会则变成灰色（图5-12），这说明已经禁止了“b a c k g r o u n d”了。当然了，这个操作也可以通过鼠标右键的“D i s a b l e X X X X X”来实现（X X X X X表示当前选择的C S S属性）。我们再次单击禁止图标，恢复“b a c k g r o u n d”属性。我们这次要把“b a c k g r o u n d”的颜色由蓝色（b l u e）修改为绿色（g r e e n）。我们把鼠标移动到“b a c k g r o u n d”属性值“b l u e”上（图5-13）。怎么会出现一个蓝色背景的方框？这是F i r e b u g提供背景预览功能，让我们很直观的知道当前背景是什么。如果背景是图片的话，显示的将是背景图片的缩略图。继续我们的操作，单击属性值，在出现的编辑框中将“b l u e”修改为“g r e e n”。好了，背景已经修改为绿色了。现在的显示文本是左对齐的，我想让它居中对齐，这需要在C S S里加一个“t e x t-a l i g n”的属性，值为“c e n t e r”。请在C S S上单击鼠标右键，在菜单中选择“N e w P r o p e r t y..”，在编辑框中输

入“t e”，F i r e b u g已通过自动完成功能帮我们输入“t e x t-a l i g n”了（图5-14），按T a b 键或回车，在属性值中我们输入“c”，F i r e b u g再次帮我们自动完成了“c e n t e r”（图5-15），按T a b键或回车完成输入，如果不需要继续输入新属性，按E S C或单击鼠标取消输入。文本“方块二”现在已经居中显示了。如果忘记了某个属性值有那些选项怎么办？不要紧，在输入属性值的时候可以通过上、下箭头选择我们需要的属性值。

在“S t y l e”标签里我们可以选择“O p t i o n s”菜单里的“S h o w C o m p u t e d S t y l e”查看浏览器默认的风格定义。

图5-11

图5-12

图5-13

图5-14图5-15

页面设计中，我们有时候最头疼的是什么？是盒子模型！为了调整一个E l e m e n t的m a r g i n、b o r d e r、p a d d i n g和相对位置，我们往往需要花很多工夫去修改源代码，然后刷新页面查看效果。有了F i r e b u g，你就可以轻松应对了。我们将右边的区域切换到“L a y o u t”标签（图5-16），你会看到一个盒子模型，里面从外到里通过不同的线和颜色划分出了o f f s e t、m a r g i n、b o r d e r、p a d d i n g和内容五个区域，里面4个区域在每个边上都有1个数值，表示该方向上的调整值。我们先在左边选择“d i v2”，然后把鼠标分别移动到“L a y o u t”里的不同区域（图5-17），然后留意一下页面，页面在顶部多了一条水平标尺，在左边多一条垂直标尺，而4条实线指示出了当前鼠标指示的区域实际位置，通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量（单位是p x），当然我们也可以通过l a y o u t中的数字计算出这些偏移量。在图中，我们还可以看到，在内容区域的外面还有3个不同颜色的区域，它们从里到外用不同颜色表示了p a d d i n g、b o r d e r、m a r g i n的位置和偏移量。只要将鼠标移动到不同区域，页面中的4条实线也会改变位置，指示出页面中相应的区域。我们还可以通过修改L a y o u t 中的数值，对显示效果进行调整。例如我们要将“d i v2”的内容显示区域扩大到200×200，将鼠标移动最左边的100上，光标变成“I”后，单击鼠标，然后在输入框中输入200，按回车可继续修改高度值，输入200，回车后完成修改。页面中的“d i v2”区域已经扩展到200×200了，而源代码也增加了“s t y l e="w i d t h:200p x;h e i g h t:200p x;"”（图5-18）。我们切换标签到“S t y l e”，会发现多了“e l e m e n t.s t y l e{h e i g h t:200p x;w i d t h:200p x;}”(图5-19)，而C S S定义里面的高度和宽度都划了横线，表示不起作用了，“e l e m e n t.s t y l e”表示直接定义在E l e m e n t源代码上的C S S属性。有时候某些E l e m e n t会有相同的属性，也有自己特殊的属性，而特殊的属性想写在E l e m e n t的源代码上，就可以在S t y l e里单击鼠标右键选择“E d i t E l e m e n t S t y l e..”进行添加。如果有兴趣的话，大家可以尝试修改“L a y o u t”里的其它属性值，看看页面的变化，这里我就不再一一说明了。

如果不想在页面中显示标尺和4条实线，可以不选择“O p t i o n s”菜单里的“S h o w R u l e s a n d G u i d e s”。

图5-16

图5-17

图5-18

图5-19

在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容，这里就不一一说明了。D O M的说明请看查看D O M结构一节，两者是一样的。在源代码区域中如果觉得源代码显示太密，可以将“O p t i o n s”菜单里的“S h o w W h i t e S p a c e”选项打开，每个源代码块之间会用空白行隔离。如果要查看源代码的注释内容，请将“O p t i o n s”菜单里的“S h o w C o m m e n t s”选项打开。

这里要提醒大家一下，在H T M L里调试出正确的源代码和C S S后，别忘记将源代码和C S S 的修改结果复制到你的源代码文件中，不然你的调试结果在页面刷新后会付之东流。切记！切记！

6、查看C S S定义

将功能区第二行的标签切换到“C S S”，在这里我们可以查看页面中所有的C S S定义，包括链接的C S S文件。通过功能区的文件选择按钮可以选择不同的含有C S S的文件（图6-1红色圈住部分）。

图6-1

C S S的定义的编辑这里就不再说明了，这个可以参考H T M L的“S t y l e”操作。

“E d i t”按钮功能和H T M L的“E d i t”功能类似。

7、脚本调试

将功能区第二行的标签切换到“S c r i p t”，在这里我们可以对页面中所有的脚本进行调试，包括链接的脚本。和C S S一样，可以通过文件选择按钮选择不同的脚本文件。

如果要在脚本中设置一个断点，可以单击行号旁边的空白区域，这时会出现一个红色的点表示在这里设置了断点（图7-1），当脚本运行到此会停止运行，等待你的操作。在右边的小窗口将标签切换到“B r e a k p o i n t s”可以查看我们设置的所有断点（图7-2），单击左上角的c h e c k b o x可以让断点不起作用，如果要删除断点可以单击右上角的删除图标。通过

“O p t i o n s”菜单的“D i s a b l e A l l B r e a k p o i n t s”可暂时禁止所有断点，而“R e m o v e A l l

B r e a k p o i n t s”可删除所有断点。在断点标记的红点上单击右键还可以设置断点条件，在符合条件的时候才会停止脚本的执行。

图7-1

图7-2

下面我们来尝试一下断点的功能。首先在测试页脚本里增加一个t e s t的函数，函数的主要操作是运行一个1000次的循环，将循环的参数值显示在“d i v2”里：

f u n c t i o n t e s t(){

f o r(v a r i=0;i<1000;i++){

d o c u m

e n t.g e t E l e m e n t B y I d('d i v2').i n n e r H T M L=i;

}

}

在“d i v2”里增加一个“o n c l i c k”属性，单击后执行t e s t：

方块二

刷新页面，然后在“f o r(v a r i=0;i<1000;i++){”这行上设置一个断点，并设置条件为“i=100”（图7-3），然后单击“d i v2”开始执行函数t e s t。

图7-3

当脚本停下来后，我们将鼠标移动到变量“i”上，这时会出现一个小方框，里面有一个数值，这就是变量“i“的当前值（图7-4）。在脚本调试的时候，你可以通过这个方法很方便的了解到当前变量的值。你还可以通过右边窗口的“W a t c h”标签查看到“i”的值（图7-5）。

图7-4

图7-5

在“W a t c h”标签窗口我们可以通过“O p t i o n s”菜单选择查看用户自定义属性（S h o w

U s e r-d e f i n e d P r o p e r t i e s）、用户自定义函数（S h o w U s e r-d e f i n e d F u n c t i o n s）、D O M属性（S h o w D O M P r o p e r t i e s）、D O M函数(S h o w D O M F u n c t i o n s)和D O M常数(S h o w D O M C o n s t a n t s)。我们还可以通过单击“N e w w a t c h e x p r e s s i o n…”（图7-6淡黄色背景部分）加入自己想跟踪的内容。例如我们想跟踪一下“d i v2”的显示内容，就可以单击“N e w w a t c h e x p r e s s i o n…”，加入“d o c u m e n t.g e t E l e m e n t B y I d('d i v2').i n n e r H T M L”，输入中可通过T A B键自动完成关键字的输入（图7-7）。如果不想跟踪了，可单击最右边的删除图标取消跟踪。

图7-6