收藏

下载资源 加入VIP,免费下载

第1页 / 共46页

第2页 / 共46页

第3页 / 共46页

第4页 / 共46页

第5页 / 共46页

在例子中我们通过JavaScript在“div1”中加入了“div3”，在Firefox中查看源代码你是看不到“div1”中包含有代码“方块三”的，但是Firebug中我们是可以看见的（图5-2选中部分）。

--[if!

vml]-->

--[endif]-->

图5-2

从图5-1中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到HTMLElement中的CSS定义、布局情况和DOM结构。

从图5-2中我们可以看到，源代码按DOM结构分层次显示的，通过层次折叠功能，我们就可以很方便分析代码。

在功能区的第一行还根据你的选择，清晰的按子、父、根列出了当前源代码的层次（图5-2红色部分），单击各部分，则会即刻转到该部分的源代码。

--[if!

vml]-->

--[endif]-->

图5-3

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

在图5-4中，鼠标正指向“div1”，而在页面中“div1”的显示区域上被一个半透明的方块遮盖了。

--[if!

vml]-->

--[endif]-->

图5-4

如果你把“Inspect”按钮按下，功能正好相反，在页面中移动鼠标，则当前显示区域的源代码会被加亮显示出来。

在图5-5中，我们可以看到鼠标指针正指向“方块二”，而在源代码中可以看到，“方块二”的源代码“方块二”已被加亮显示（红色部分）。

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

--[if!

vml]-->

--[endif]-->

图5-5

是不是很方便？

方便是方便，但是我的源代码很多，而且有些区域在页面中不方便鼠标指定，怎么办？

没关系，我们还有一个厉害武器，搜索功能。

譬如我们知道某个HTMLElement的ID是“div2”，但在层层叠叠的源代码中不好找，在页面中鼠标也很难找到，那我们就在功能区的搜索框中输入“div2”，再看看源代码区域，“div2”被加亮显示出来了（图5-6红色部分）。

在这个简单的例子可能看不出很好的效果，大家可以尝试一下把“div1”先折叠起来，然后在搜索框输入“div3”，你可以看到“div1”会自动展开，并将“div3”加亮显示，如果还觉得不够理想，可以找一个源代码比较多的例子测试一下。

--[if!

vml]-->

--[endif]-->

图5-6

除了通过按下“Inspect”按钮，单击显示区域选择源代码，我们还可以通过单击源代码中的HTML标记（开始或结束标记都可以）来选择。

我们尝试一下把鼠标移动到HTML标记，会发现鼠标指针变成了手的形状，这说明我们可以通过单击选择该源代码。

选择源代码后，我们就可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型（CSS盒子模型请参阅相关说明，这里就不再赘述了），还有一个很好的功能就是当外部编辑器修改了源代码（没有删除该源代码，只是修改），我们在浏览器重新加载页面后，选择的源代码不会改变，我们可以很方便的观察源代码的变化与效果。

有没有经常为调试某个页面效果在源代码编辑器和浏览器之间切换，一次又一次的刷新而感到懊恼？

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

你可以直接在源代码中进行编辑，然后查看效果。

如果只是修改已经存在的属性，例如要修改“div2”的内部文本，则直接将鼠标移动到文本上面，等鼠标指针换成“I”，单击即可进行编辑了。

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

如果要为某Element添加属性，请将鼠标移动到该Element上，等光标变为“I”的时候，单击鼠标右键，从菜单中选择“NewAttribute..”，在显示的编辑框中输入你要添加的属性名称就可以了。

--[if!

vml]-->

--[endif]-->

图5-7

--[if!

vml]-->

--[endif]-->

图5-8

我们尝试一下为“div2”增加一个“onclick”属性，单击的结果是将“div2”的显示文本修改为“单击”。

把光标移动到“div2”上，然后单击鼠标右键，选择“NewAttribute..”（图5-7），在编辑框中输入“onclick”，最后按一下回车键（图5-8），出现属性值输入框后，输入“this.innerHTML=’单击’”，回车后我们可以继续添加下一个属性，这次测试不需要，所以按ESC结束我们的输入。

我们来检验一下修改结果，单击页面“div2”的区域（图5-9），“div2”的显示文本已修改为“单击”了，而源代码也改变了。

有没有发现，“div2”被加亮显示了？

这又是Firebug的一个功能。

只要我们通过页面中的操作修改了Element的属性，Firebug就会在源代码中通过加亮的方式指示当前操作修改那些属性值。

譬如我们单击某个链接修改了一个iframe里的src，那么这个src的属性值就会被加亮显示。

又譬如我们单击某个链接修改了一个image里的图像，那么它的src属性值也会被加亮显示。

我们可以通过Options菜单里的“HighlightChanges”设置是否加亮显示改变。

而“ExpandChanges”则是设置被改变的源代码折叠起来看不见时展开让它可见。

而“ScrollChangesintoview”则是源代码很多，被改变的源代码不在可视区域时，将被改变的源代码滚动到可视区域。

--[if!

vml]-->

--[endif]-->

图5-9

有时候我们不单是要增加一两个属性，而是要做更多的修改，这怎么办呢？

很简单，选择你要更改Element，然后单击功能区第一行的“Edit”按钮或者直接将鼠标移动到要修改的Element上，单击鼠标右键，选择“EditHTML..”，这时候，源代码区域将切换到编辑状态，你可以随意的修改你选择的源代码了。

我们尝试修改一下“div2”，将被修改显示文本修改回“方块二”，我们选择“div2”，然后单击“Edit”按钮（图5-10），将显示文本修改回“方块二”，然后再次单击“Edit”按钮退出编辑状态，如果要放弃修改，可以按ESC键退出。

因为是所见即所得的，所以我们在修改的时候，页面会同时刷新显示。

--[if!

vml]-->

--[endif]-->

图5-10

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

很简单，选择该Element，然后在右边的窗口选择“Style”标签，这里显示的就是当前Element的CSS定义了。

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

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

将鼠标移动到“background”这行（图5-11），我们可以看到在这行的最右边会有一个灰色的禁止图标，只要单击这个禁止图标，就可以禁止了这个CSS属性了。

我们单击这个图标看看效果，页面中的“div2”已经变成白色背景了，而禁止图标也变成红色，而文本会则变成灰色（图5-12），这说明已经禁止了“background”了。

当然了，这个操作也可以通过鼠标右键的“DisableXXXXX”来实现（XXXXX表示当前选择的CSS属性）。

我们再次单击禁止图标，恢复“background”属性。

我们这次要把“background”的颜色由蓝色（blue）修改为绿色（green）。

我们把鼠标移动到“background”属性值“blue”上（图5-13）。

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

这是Firebug提供背景预览功能，让我们很直观的知道当前背景是什么。

如果背景是图片的话，显示的将是背景图片的缩略图。

继续我们的操作，单击属性值，在出现的编辑框中将“blue”修改为“green”。

好了，背景已经修改为绿色了。

现在的显示文本是左对齐的，我想让它居中对齐，这需要在CSS里加一个“text-align”的属性，值为“center”。

请在CSS上单击鼠标右键，在菜单中选择“NewProperty..”，在编辑框中输入“te”，Firebug已通过自动完成功能帮我们输入“text-align”了（图5-14），按Tab键或回车，在属性值中我们输入“c”，Firebug再次帮我们自动完成了“center”（图5-15），按Tab键或回车完成输入，如果不需要继续输入新属性，按ESC或单击鼠标取消输入。

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

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

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

在“Style”标签里我们可以选择“Options”菜单里的“ShowComputedStyle”查看浏览器默认的风格定义。

--[if!

vml]-->

--[endif]-->

图5-11

--[if!

vml]-->

--[endif]-->

图5-12

--[if!

vml]-->

--[endif]-->

图5-13

--[if!

vml]-->

--[endif]-->

--[if!

vml]-->

--[endif]-->

图5-14

图5-15

页面设计中，我们有时候最头疼的是什么？

是盒子模型！

为了调整一个Element的margin、border、padding和相对位置，我们往往需要花很多工夫去修改源代码，然后刷新页面查看效果。

有了Firebug，你就可以轻松应对了。

我们将右边的区域切换到“Layout”标签（图5-16），你会看到一个盒子模型，里面从外到里通过不同的线和颜色划分出了offset、margin、border、padding和内容五个区域，里面4个区域在每个边上都有1个数值，表示该方向上的调整值。

我们先在左边选择“div2”，然后把鼠标分别移动到“Layout”里的不同区域（图5-17），然后留意一下页面，页面在顶部多了一条水平标尺，在左边多一条垂直标尺，而4条实线指示出了当前鼠标指示的区域实际位置，通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量（单位是px），当然我们也可以通过layout中的数字计算出这些偏移量。

在图中，我们还可以看到，在内容区域的外面还有3个不同颜色的区域，它们从里到外用不同颜色表示了padding、border、margin的位置和偏移量。

只要将鼠标移动到不同区域，页面中的4条实线也会改变位置，指示出页面中相应的区域。

我们还可以通过修改Layout中的数值，对显示效果进行调整。

例如我们要将“div2”的内容显示区域扩大到200×200，将鼠标移动最左边的100上，光标变成“I”后，单击鼠标，然后在输入框中输入200，按回车可继续修改高度值，输入200，回车后完成修改。

页面中的“div2”区域已经扩展到200×200了，而源代码也增加了“style="width:

200px;height:

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

我们切换标签到“Style”，会发现多了“element.style{height:

200px;width:

200px;}”（图5-19），而CSS定义里面的高度和宽度都划了横线，表示不起作用了，“element.style”表示直接定义在Element源代码上的CSS属性。

有时候某些Element会有相同的属性，也有自己特殊的属性，而特殊的属性想写在Element的源代码上，就可以在Style里单击鼠标右键选择“EditElementStyle..”进行添加。

如果有兴趣的话，大家可以尝试修改“Layout”里的其它属性值，看看页面的变化，这里我就不再一一说明了。

   如果不想在页面中显示标尺和4条实线，可以不选择“Options”菜单里的“ShowRulesandGuides”。

--[if!

vml]-->

--[endif]-->

图5-16

--[if!

vml]-->

--[endif]-->

图5-17

--[if!

vml]-->

--[endif]-->

图5-18

--[if!

vml]-->

--[endif]-->

图5-19

在源代码显示区域我们还可以通过鼠标右键复制源代码和显示内容，这里就不一一说明了。

DOM的说明请看查看DOM结构一节，两者是一样的。

在源代码区域中如果觉得源代码显示太密，可以将“Options”菜单里的“ShowWhiteSpace”选项打开，每个源代码块之间会用空白行隔离。

如果要查看源代码的注释内容，请将“Options”菜单里的“ShowComments”选项打开。

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

切记！

切记！

--[if!

supportLists]-->6、 

--[endif]-->查看CSS定义

将功能区第二行的标签切换到“CSS”，在这里我们可以查看页面中所有的CSS定义，包括链接的CSS文件。

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

--[if!

vml]-->

--[endif]-->

图6-1

CSS的定义的编辑这里就不再说明了，这个可以参考HTML的“Style”操作。

“Edit”按钮功能和HTML的“Edit”功能类似。

--[if!

supportLists]