Firebug和Fiddler的安装和使用 软件开发技术项目实践课件培训讲解.pptVIP

工作任务：Firebug和Fiddler的 安装和使用;任务描述;相关知识;相关知识;相关知识;任务实施;任务实施;任务实施;任务实施;任务实施;任务实施; 从图2-8中可以看到，源代码是按DOM结构分层次显示的，通过层次折叠功能可以很方便地分析代码。Firebug窗口的功能区还可以根据用户的选择，清晰地按子、父、根列出当前源代码的层次，单击各部分，则会即刻转到该部分的源代码。 在源代码上移动鼠标，页面就会出现一个半透明的方块，指示当前鼠标所指源代码的显示区域。如果单击【查看页面中的元素】按钮 ，在页面中移动鼠标，则当前显示区域的源代码会被高亮显示。; 如果源代码过多，有些区域在页面中不方便使用鼠标指定，可以使用搜索功能。例如，知道某个HTML元素的ID是div2，但是在层层叠叠的源代码中不好找，在页面中也很难用鼠标找到，这时可以在功能区的搜索框中输入“div2”，在源代码区div2就被高亮显示。 单击【查看页面中的元素】按钮，把鼠标移动到HTML标记，会发现鼠标指针变成了手的形状，这时可以通过单击选择该源码。源码选定后，可以通过右边的功能区查看、编辑和调试它的CSS定义和盒子模型（请参阅相关的资料）。在功能区修改源代码后，立即可以观察到变化后的效果，但是页面的源码并没有改变。 使用Firebug调试页面非常方便，可以直接在源代码中编辑，然后查看效果。如果只是修改已有属性，例如，要修改div2的内部文本，直接将鼠标移动到文本上面，等鼠标指针变成“I”，单击即可进行编辑。如果要为某个元素添加属性，则将鼠标移动到该元素上，等鼠标光标变为“I”时，单击鼠标右键，在弹出的快捷菜单中选择【新建属性】命令，在显示的编辑框中输入要添加的属性名称即可。; 现在尝试为div2增加一个onclick属性，单击的结果是将div2的显示文本修改为“单击”。把鼠标光标移动到div2上，然后单击鼠标右键，在弹出的快捷菜单中选择【新建属性】命令，在编辑框中输入“onclick”，然后按Enter键，出现属性值编辑框后，输入“this.innerHTML=‘单击’”，按Enter键即可，如图2-9所示。下面来检验修改结果，单击页面div2的区域??div2的显示文本已修改为“单击”，而源代码也改变了。这时发现div2被加亮显示了，这是Firebug的又一个功能。只要通过页面中的操作修改了元素的属性，Firebug就会在源代码中通过加亮的方式指示当前操作修改的属性值。; 如果要给某个元素同时增加多个属性，首先选取要更改的元素，然后单击功能区的【编辑】按钮，或直接将鼠标移动到要修改的元素上，单击鼠标右键，在弹出的快捷菜单中选择【编辑HTML】命令，这时源代码区域将切换到编辑状态，这时就可以随意修改选择的源代码了，如图2-10所示。 如果要修改元素的CSS定义，先选择该元素，然后在右边的窗口选择【样式】选项卡，这里显示的就是当前元素的CSS定义，在这里可以对CSS定义进行添加、编辑、删除、禁止等操作。; 现在尝试把div2的背景色禁止。将鼠标移动到background这一行，可以看到在该行的最左边有一个灰色的禁止图标，只要单击这个禁止图标，就可以禁止这个CSS属性。我们单击这个图标看看效果，页面中的div2已经变成白色背景，而禁止图标也变成红色，而文本则变成灰色，如图2-11所示，这说明已经禁止了background。当然，这个操作也可以通过鼠标右键菜单的【禁用XXXXX】命令来实现（XXXXX表示当前选择的CSS属性）。; 再次单击禁止图标，恢复background属性。现在尝试把background的颜色由蓝色（blue）修改为绿色（green）。当把鼠标移动到background属性值blue上时，会出现一个蓝色背景的方框，这是Firebug提供的背景预览功能。如果背景是图片，显示的将是背景图片的缩略图。单击属性值，在出现的编辑框中将“blue”修改为“green”，背景就修改为绿色了。现在的显示文本是左对齐的，如要让它居中对齐，这时需要在CSS中加一个text-align的属性，值为center。在CSS上单击鼠标右键，在弹出的快捷菜单中选择【新建属性值】命令，在编辑框中输入“te”，Firebug已通过自动完成功能输入“text-align”，按Tab键或Enter键，在属性值中输入“c”，Firebug再次自动输入“center”，按Tab键或Enter键完成输入。这时方框二的背景色已经变成绿色，文本“单击”现在已经居中显示，如图2-12所示。;任务实施;任务实施;任务实施;任务实施;任务实施;任务实施;任务实施;任务实施;任务实施;任务实