Firebug使用详解(6)

　　除了通过按下“Inspect”按钮，

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

　　我们还可以通过单击源代码中的HTML标记(开始或结束标记都可以)来选择。

　　我们尝试一下把鼠标移动到HTML标记，

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

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

　　选择源代码后，

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

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

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

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

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

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

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

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

　　然后查看效果。

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

　　例如要修改“div2”的内部文本，

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

　　等鼠标指针换成“I”，

　　单击即可进行编辑了。

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

　　如果要为某Element添加属性，

　　请将鼠标移动到该Element上，

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

　　单击鼠标右键，

　　从菜单中选择“New Attribute..”，

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

　　我们尝试一下为“div2”增加一个“onclick”属性，

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

　　把光标移动到“div2”上，

　　然后单击鼠标右键，

　　选择“New Attribute..”(图5-7)，

　　在编辑框中输入“onclick”，

　　最后按一下回车键(图5-8)，

　　出现属性值输入框后，

　　输入“this.innerHTML=’单击’”，

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

　　这次测试不需要，

　　所以按ESC结束我们的输入。

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

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