Firebug使用详解(7)

　　单击页面“div2”的区域(图5-9)，

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

　　而源代码也改变了。

　　有没有发现，

　　“div2”被加亮显示了?

　　这又是Firebug的一个功能。

　　只要我们通过页面中的操作修改了Element的属性，

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

　　譬如我们单击某个链接修改了一个iframe里的src，

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

　　又譬如我们单击某个链接修改了一个image里的图像，

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

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

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

　　而“Scroll Changes into view”则是源代码很多，

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

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

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

　　而是要做更多的修改，

　　这怎么办呢?

　　很简单，

　　选择你要更改Element，

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

　　单击鼠标右键，

　　选择“Edit HTML..”，

　　这时候，

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

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

　　我们尝试修改一下“div2”，

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

　　我们选择“div2”，

　　然后单击“Edit”按钮(图5-10)，

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

　　然后再次单击“Edit”按钮退出编辑状态，

　　如果要放弃修改，

　　可以按ESC键退出。

　　因为是所见即所得的，

　　所以我们在修改的时候，

　　页面会同时刷新显示。

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

　　很简单，

　　选择该Element，

　　然后在右边的窗口选择“Style”标签，

　　这里显示的就是当前Element的CSS定义了。

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

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

　　将鼠标移动到“background”这行(图5-11)，

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

　　只要单击这个禁止图标，

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

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

　　页面中的“div2”已经变成白色背景了，

　　而禁止图标也变成红色，

　　而文本会则变成灰色(图5-12)，

　　这说明已经禁止了“background”了。

　　当然了，

　　这个操作也可以通过鼠标右键的“Disable XXXXX”来实现(XXXXX表示当前选择的CSS属性)。

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