在浏览器中调试web页面（二）：firebug使用（2）-Javascript调试

gogo1217

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

最近访客更多访客>>

kannan22

zanggj0618

yaweja

1234561831

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript
开发工具

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

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

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

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

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

在本测试中，将使用firebug的断点，变量监控

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script type="text/javascript">
/**
*@author gogo1217 http://gogo1217.iteye.com
*firebug javascript degbug
*/
var i=0,max=5;//全局变量
function clickme(){
i++;
if(i<=max){
alert('点击次数为:'+i);
}
console.log('点击次数为:'+i+'，最多点击次数为:'+max);//firebug内置函数
}
</script>
</head>
<body>
<input type="button" onclick="clickme()" onmouseout="console.log('mousemoveout event')" 
	   onmouseover="console.log('mousemoveover event')" value="click me"/>
</body>
</html>

2.使用火狐打开firebug-demo.html,启用firebug，并切换“脚本”，界面如下图所示：

3.给第11行 设置一个断点，具体操作为：在第11行前单击鼠标左键。启用 firebug命令行工具。

4.命令行工具和控制台函数

我们可以看到，当鼠标移入页面按钮“click me”时，控制台打印“mouseover event”, 当鼠标移出页面按钮“click me”时，控制台打印“mouseout event”。没错，console.log(log:string)是在控制台输出日志的，这比我们自己写一个调试的函数方便多了，其他的console函数可以在命令行输入"consonle.",命令行将自动提示console所包含的函数，如下图所示。

我们当然可以在控制台中的命令行输入javascript，敲入"enter",javascript便开始执行。如输入“document.getElementsByTagName('input')”,控制台便输出所执行的命令和结果，这里可以看到执行结果为“[input click me]”，如下图所示，如果需要查找历史记录，直通过方向控制键盘的“向上”键便可依次在命令行输出历史记录。