Firebug使用详解(5)

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

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

　　左边是显示源代码，

　　右边是一个功能区，

　　可以从这里查看到HTML Element中的CSS定义、布局情况和DOM结构。

　　从图5-2中我们可以看到，

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

　　通过层次折叠功能，

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

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

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

　　单击各部分，

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

　　在源代码上移动鼠标，

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

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

　　当选择。

　　在图5-4中，鼠标正指向“div1”，

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

　　如果你把“Inspect”按钮按下，

　　功能正好相反，

　　在页面中移动鼠标，

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

　　在图5-5中，

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

　　而在源代码中可以看到，

　　“方块二”的源代码“

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

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

　　是不是很方便?

　　方便是方便，

　　但是我的源代码很多，

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

　　怎么办?

　　没关系，

　　我们还有一个厉害武器，

　　搜索功能。

　　譬如我们知道某个HTML Element的ID是“div2”，

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

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

　　那我们就在功能区的搜索框中输入“div2”，

　　再看看源代码区域，“div2”被加亮显示出来了(图5-6红色部分)。

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

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

　　然后在搜索框输入“div3”，

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

　　并将“div3”加亮显示，

　　如果还觉得不够理想，

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

原文转自：http://www.cnblogs.com/xiachufeng/archive/2010/08/02/1790411.html