Firebug的基本功能及如何使用Firebug.docx

方块二＜／ｄｉv>

　<ｓcript>

　dｏｃument.getElemｅntByIｄ（＇dｉv１'）.innｅｒHＴML+＝'方块三<／div>'；

　

<／bｏdｙ＞

在例子中我们通过ＪavaScriｐt在“div1”中加入了“div3”,

在Firefox中查看源代码你是看不到“ｄｉv1”中包含有代码“＜divｉｄ＝"div3">方块三”的，

但是Ｆirｅbug中我们是可以看见的（图5－2选中部分）。

图５-2

　

从图5-1中我们可以看到,

信息区被分成了两个部分，

左边是显示源代码,

右边是一个功能区,

可以从这里查看到HTＭLElemｅｎｔ中的ＣSS定义、布局情况和ＤＯＭ结构。

从图５-2中我们可以看到,

源代码按DOM结构分层次显示的，

通过层次折叠功能,

我们就可以很方便分析代码。

在功能区的第一行还根据你的选择,

清晰的按子、父、根列出了当前源代码的层次（图5-2红色部分），

单击各部分,

则会即刻转到该部分的源代码。

图5-3

在源代码上移动鼠标,

页面就会出现一个半透明的方块,

指示当前鼠标所指源代码的显示区域，

当选择。

在图５－4中,鼠标正指向“ｄiv1”，

而在页面中“div1”的显示区域上被一个半透明的方块遮盖了。

图5-4

如果你把“Inｓｐect”按钮按下，

功能正好相反,

在页面中移动鼠标，

则当前显示区域的源代码会被加亮显示出来。

在图５－5中,

我们可以看到鼠标指针正指向“方块二”,

而在源代码中可以看到，

“方块二”的源代码“方块二

如果你单击某个显示区域，

则该区域的源代码会被选中。

图5-5

是不是很方便？

方便是方便，

但是我的源代码很多，

而且有些区域在页面中不方便鼠标指定，

怎么办？

没关系,

我们还有一个厉害武器,

搜索功能。

譬如我们知道某个HＴMＬEleｍｅｎt的IＤ是“dｉv2”,

但在层层叠叠的源代码中不好找,

在页面中鼠标也很难找到,

那我们就在功能区的搜索框中输入“ｄiv2”,

再看看源代码区域，“dｉv2”被加亮显示出来了（图5－6红色部分）。

在这个简单的例子可能看不出很好的效果,

大家可以尝试一下把“ｄiv1”先折叠起来，

然后在搜索框输入“diｖ3”，

你可以看到“div1”会自动展开，

并将“ｄiv３”加亮显示，

如果还觉得不够理想,

可以找一个源代码比较多的例子测试一下。

图5－6

除了通过按下“Inｓpect”按钮，

单击显示区域选择源代码,

我们还可以通过单击源代码中的ＨTML标记（开始或结束标记都可以）来选择。

我们尝试一下把鼠标移动到HTＭL标记,

会发现鼠标指针变成了手的形状,

这说明我们可以通过单击选择该源代码。

选择源代码后,

我们就可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型（ＣSS盒子模型请参阅相关说明,这里就不再赘述了），

还有一个很好的功能就是当外部编辑器修改了源代码（没有删除该源代码,只是修改）,

我们在浏览器重新加载页面后,选择的源代码不会改变，

我们可以很方便的观察源代码的变化与效果。

有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换，

一次又一次的刷新而感到懊恼?

有了Firebug你就不用再懊恼了。

你可以直接在源代码中进行编辑，

然后查看效果。

如果只是修改已经存在的属性，

例如要修改“diｖ2”的内部文本,

则直接将鼠标移动到文本上面,

等鼠标指针换成“I”，

单击即可进行编辑了。

其它已存在的属性和属性值也可以这样直接进行编辑。

如果要为某Ｅlｅmeｎt添加属性,

请将鼠标移动到该Elｅmeｎｔ上，

等光标变为“I”的时候，

单击鼠标右键，

从菜单中选择“NeｗAttribｕtｅ..”，

在显示的编辑框中输入你要添加的属性名称就可以了。

图5-7

图5-8

我们尝试一下为“diｖ２”增加一个“ｏｎclicｋ”属性，

单击的结果是将“diｖ２”的显示文本修改为“单击”。

把光标移动到“ｄiｖ２”上，

然后单击鼠标右键，

选择“New　Ａｔtrｉbuｔｅ..”（图5-7）,

在编辑框中输入“oncliｃk”，

最后按一下回车键（图5－8），

出现属性值输入框后,

输入“this.innｅrHＴML=’单击’”，

回车后我们可以继续添加下一个属性，

这次测试不需要，

所以按EＳC结束我们的输入。

我们来检验一下修改结果,

单击页面“ｄiv２”的区域（图５－9），

“div２”的显示文本已修改为“单击”了，

而源代码也改变了。

有没有发现,

“dｉｖ２”被加亮显示了？

这又是Fireｂuｇ的一个功能。

只要我们通过页面中的操作修改了Ｅleｍent的属性,

Fiｒebｕg就会在源代码中通过加亮的方式指示当前操作修改那些属性值。

譬如我们单击某个链接修改了一个ifrａme里的ｓrｃ，

那么这个ｓrc的属性值就会被加亮显示。

又譬如我们单击某个链接修改了一个iｍage里的图像,

那么它的ｓrc属性值也会被加亮显示。

我们可以通过Optｉoｎｓ菜单里的“Ｈiｇhlighｔ　Ｃhanges”设置是否加亮显示改变。

而“ExｐandChａngｅs”则是设置被改变的源代码折叠起来看不见时展开让它可见。

而“Ｓcrｏll　Changｅsinto　ｖiew”则是源代码很多，

被改变的源代码不在可视区域时,

将被改变的源代码滚动到可视区域。

图5-9

ﻫ

　

有时候我们不单是要增加一两个属性,

而是要做更多的修改，

这怎么办呢?

很简单,

选择你要更改Element，

然后单击功能区第一行的“Eｄit”按钮或者直接将鼠标移动到要修改的Eｌement上，

单击鼠标右键，

选择“EｄitＨTMＬ..”,

这时候，

源代码区域将切换到编辑状态,

你可以随意的修改你选择的源代码了。

我们尝试修改一下“ｄiｖ2”,

将被修改显示文本修改回“方块二”，

我们选择“div２”，

然后单击“Ｅｄit”按钮（图5-1０）,

将显示文本修改回“方块二”,

然后再次单击“Eｄit”按钮退出编辑状态,

如果要放弃修改，

可以按ESC键退出。

因为是所见即所得的，

所以我们在修改的时候，

页面会同时刷新显示。

图5-10

如果要修改Element的CSS定义怎么办?

很简单，

选择该Element,

然后在右边的窗口选择“Ｓｔyle”标签,

这里显示的就是当前Elemｅnｔ的CSS定义了。

我们在这里可以对CＳＳ定义进行添加、编辑、删除、禁止等操作。

我们尝试一下把“ｄiv2”的背景色禁止了看看。

将鼠标移动到“backgｒｏund”这行（图5-11）,

我们可以看到在这行的最右边会有一个灰色的禁止图标,

只要单击这个禁止图标，

就可以禁止了这个CSS属性了。

我们单击这个图标看看效果,

页面中的“dｉv２”已经变成白色背景了，

而禁止图标也变成红色，

而文本会则变成灰色（图５-１2），

这说明已经禁止了“backgroｕnd”了。

当然了，

这个操作也可以通过鼠标右键的“Disaｂle　XXXXX”来实现（XXXXX表示当前选择的ＣSＳ属性）。

我们再次单击禁止图标，

恢复“ｂａckgｒound”属性。

我们这次要把“bacｋground”的颜色由蓝色（blｕｅ）修改为绿色（ｇreen）。

我们把鼠标移动到“baｃｋgrｏund”属性值“bｌuｅ”上（图5－13）。

怎么会出现一个蓝色背景的方框？

这是Firebug提供背景预览功能，

让我们很直观的知道当前背景是什么。

如果背景是图片的话,

显示的将是背景图片的缩略图。

继续我们的操作,

单击属性值,

在出现的编辑框中将“blｕｅ”修改为“grｅen”。

好了，

背景已经修改为绿色了。

现在的显示文本是左对齐的,

我想让它居中对齐，

这需要在CSＳ里加一个“text-alｉgn”的属性,

值为“cenｔer”。

请在ＣSＳ上单击鼠标右键,

在菜单中选择“ＮewProｐｅｒty..”，

在编辑框中输入“ｔe”，

Ｆireｂｕg已通过自动完成功能帮我们输入“tｅｘt-align”了（图5－１４），

按Taｂ键或回车，

在属性值中我们输入“c”,

Fiｒebug再次帮我们自动完成了“center”（图５-１５），

按Tab键或回车完成输入,

如果不需要继续输入新属性,

按EＳC或单击鼠标取消输入。

文本“方块二”现在已经居中显示了。

如果忘记了某个属性值有那些选项怎么办？

不要紧，

在输入属性值的时候可以通过上、下箭头选择我们需要的属性值。

在“Style”标签里我们可以选择“Optｉons”菜单里的“SｈowCｏmputedSｔｙｌe”查看浏览器默认的风格定义。

图5-11

图5－12

　

图5－13

图5-14

图5－15

　

页面设计中，

我们有时候最头疼的是什么?

是盒子模型!

为了调整一个Ｅlemeｎｔ的margin、boｒdｅr、ｐadding和相对位置,

我们往往需要花很多工夫去修改源代码，

然后刷新页面查看效果。

有了Ｆiｒeｂｕg，

你就可以轻松应对了。

我们将右边的区域切换到“Ｌａyout”标签（图5-16），

你会看到一个盒子模型,

里面从外到里通过不同的线和颜色划分出了offｓet、ｍaｒgin、borｄer、ｐaｄding和内容五个区域，

里面4个区域在每个边上都有1个数值，

表示该方向上的调整值。

我们先在左边选择“dｉv2”,

然后把鼠标分别移动到“Layｏuｔ”里的不同区域（图５－17）,

然后留意一下页面，

页面在顶部多了一条水平标尺,

在左边多一条垂直标尺，

而4条实线指示出了当前鼠标指示的区域实际位置，

通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量（单位是px），

当然我们也可以通过lａyout中的数字计算出这些偏移量。

在图中,

我们还可以看到，

在内容区域的外面还有3个不同颜色的区域,

它们从里到外用不同颜色表示了paｄdｉng、borｄeｒ、mａrgin的位置和偏移量。

只要将鼠标移动到不同区域,

页面中的４条实线也会改变位置，

指示出页面中相应的区域。

我们还可以通过修改Lａyoｕt中的数值,

对显示效果进行调整。

例如我们要将“div2”的内容显示区域扩大到200×２00,

将鼠标移动最左边的10０上，

光标变成“I”后，

单击鼠标，

然后在输入框中输入２00,

按回车可继续修改高度值,

输入200,

回车后完成修改。

页面中的“div2”区域已经扩展到200×200了,

而源代码也增加了“styｌe="wｉdｔh：

200ｐx;ｈeｉght:

200px;"”（图5－18）。

我们切换标签到“Stｙle”，

会发现多了“eleｍent.stylｅ{height:

200px;width:

200px;}”（图５-１9）,

而CSＳ定义里面的高度和宽度都划了横线,

表示不起作用了,

“elemeｎt.ｓtyｌe”表示直接定义在Elemeｎt源代码上的ＣSS属性。

有时候某些Eｌeｍｅnt会有相同的属性,

也有自己特殊的属性,

而特殊的属性想写在Element的源代码上,

就可以在Ｓtｙle里单击鼠标右键选择“Ｅｄit　ElｅmentＳｔyle．．”进行添加。

如果有兴趣的话，

大家可以尝试修改“Ｌayouｔ”里的其它属性值,

看看页面的变化,

这里我就不再一一说明了。

　　如果不想在页面中显示标尺和4条实线,

可以不选择“Optｉoｎｓ”菜单里的“Show　ＲuleｓaｎdGuｉdes”。

图5-16

图5-１7

　

图5－18

图５-1９

在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容，

这里就不一一说明了。

DOM的说明请看查看DOM结构一节,

两者是一样的。

在源代码区域中如果觉得源代码显示太密，

可以将“Opｔions”菜单里的“ShｏwWhitｅ　Sｐaｃe”选项打开，

每个源代码块之间会用空白行隔离。

如果要查看源代码的注释内容,

请将“Ｏptiｏnｓ”菜单里的“ＳhowＣommenｔs”选项打开。

这里要提醒大家一下，

在HＴML里调试出正确的源代码和CSS后,

别忘记将源代码和CSS的修改结果复制到你的源代码文件中,

不然你的调试结果在页面刷新后会付之东流。

切记!

切记！

６、　查看CSS定义

将功能区第二行的标签切换到“CＳS”，

在这里我们可以查看页面中所有的CSＳ定义,

包括链接的ＣSＳ文件。

通过功能区的文件选择按钮可以选择不同的含有CSS的文件（图6-１红色圈住部分）。

图6-1

CＳS的定义的编辑这里就不再说明了，

这个可以参考HＴＭL的“Stｙle”操作。

“Ｅｄiｔ”按钮功能和ＨＴMＬ的“Ｅｄiｔ”功能类似。

7、脚本调试

将功能区第二行的标签切换到“Scｒiｐt”,

在这里我们可以对页面中所有的脚本进行调试，

包括链接的脚本。

和CSＳ一样,

可以通过文件选择按钮选择不同的脚本文件。

如果要在脚本中设置一个断点,

可以单击行号旁边的空白区域,

这时会出现一个红色的点表示在这里设置了断点（图7-１）,

当脚本运行到此会停止运行,

等待你的操作。

在右边的小窗口将标签切换到“Breakｐoints”可以查看我们设置的所有断点（图7-2），

单击左上角的chｅｃkｂｏｘ可以让断点不起作用，

如果要删除断点可以单击右上角的删除图标。

通过“Optｉoｎs”菜单的“ＤiｓaｂleAｌl　Ｂrｅakpoｉnts”可暂时禁止所有断点，

而“ReｍoveAllＢreakpoinｔs”可删除所有断点。

在断点标记的红点上单击右键还可以设置断点条件,

在符合条件的时候才会停止脚本的执行。

　

图7-１

图７-2

下面我们来尝试一下断点的功能。

首先在测试页脚本里增加一个ｔesｔ的函数,

函数的主要操作是运行一个1０0０次的循环,

将循环的参数值显示在“dｉv2”里：

　fuｎcｔionｔｅst（）{

　　for（vaｒi＝0;i<1000；i＋+）{

　　　　documｅｎt.getElementBｙId（'diｖ２'）.inｎerHTML=i;

　　}

　｝

　

在“ｄiv2”里增加一个“ｏnclｉｃk”属性，

单击后执行ｔest:

　

方块二

相关搜索

当前位置：首页 > 解决方案 > 学习计划