在浏览器中调试web页面（二）：firebug使用（1）-DOM/CSS修改

gogo1217

浏览: 152126 次
性别:
来自: 上海

最近访客更多访客>>

kannan22

zanggj0618

yaweja

1234561831

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript
开发工具

javascript html 浏览器 firebug css

相信很多人都遇到过以下几个问题:

为了调整页面某个元素的宽度或高度到最适合值，在ide中修改css或者html再刷新浏览器，重复上述修改步骤不下20次；
为了修改html，先在ide修改后在刷新浏览器，重复上面步骤不下10次。
为了得到javascript执行中的某个变量在javascript中调用很多次alert函数；
为了监控mouse事件，创建一个div,通过javascript在div中写一些html；
更多更多的问题...

如果你遇到过上面的问题，那么本文能帮你解决上述所有的问题，从而使你将更多的精力投入到其他工作中。

本文中分为3部分，第一部分：调试工具介绍，详细介绍了当前流行的各种浏览器的调试工具；第二部分:firebug的使用；第三部分：ie调试工具的使用。

1.新建测试页面firebug-demo.html,代码如下：

<html>
<head>
	<style type="text/css">
	.one{
	float:left;
	width:200px;
	}
	.two{
	float:right;
	width:200px;
	}
	</style>
	<script type="text/javascript">
	change=function(){
		document.getElementById('red').innerHTML="red changed!";
	}
	</script>
</head>
	<input type="button" onclick="change()" value="点击改变"/>
	<div style="clear:both"></div>
	<div class="one" style="background-color:red" id="red">red</div>
	<div class="two" style="background-color:blue">blue</div>
</html>

2.使用火狐打开firebug-demo.html,界面如下图所示：

3.在介绍修改dom属性之前，先介绍firebug中的页面元素查找工具（下图中红圈部分）。

点击该按钮，鼠标挪到红色的red区域，此时该元素会边框发光，同时firebug中的html选项卡中div#red被高亮选中。

反过来，不管查找工具有没有被选中，如果鼠标划过firebug中的html选项卡代码，页面中的元素均被高亮。

在编辑的过程中，通过TAB或回车 来切换下一个属性或者属性值。

4.使用firebug实时修改css样式：

firebug即能修改dom上面的 style属性来改变样式，也能直接编辑外部样式表改变样式。

style属性（修改行内样式）： 影响当前修改的元素。 选择firebug工具栏的HTML选项卡，点击左边的div#red元素，点击style的属性值,此时style变为可编辑状态，修改style属性值为"height:300px;background-color:yellow;"。随着我们的修改，浏览器将会实时的重新渲染dom，应用我们修改后的样式，我们可以发现，左边div#red的背景色由红色变为了黄色，并且高度改变为300像素了。

编辑外部样式表: 影响页面所有匹配的元素。 选择firebug工具栏的HTML选项卡，点击左边的div#red元素，此时，右边将会将该作用于该元素的样式表展现出来。点击样式表中width属性的值，修改为“width:50%”；然后按“TAB”键，样式表会另起一空白行，在属性输入框中输入border，在按住“TAB”键，在属性值填写“1px solid #CCC”;重复上述步骤完成height:400px。随着我们的修改，浏览器将会实时的重新渲染dom，应用我们修改后的样式，我们可以发现，左边div.two的边框为1像素灰色的实线，高度为400px，宽度为50%。