在浏览器中调试web页面（2）：firebug使用（2）-Javascript调试
版权所有，转载请注明来源http://gogo1217.iteye.com，违者必究！
相信很多人都遇到过以下几个问题:
- 为了调整页面某个元素的宽度或高度到最适合值，在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]”，如下图所示，如果需要查找历史记录，直通过方向控制键盘的“向上”键便可依次在命令行输出历史记录。
5.javascript调试
用鼠标左键单击页面按钮“click me”时，将调用clickme()函数，此时javascript将停止在"i++"；等待用户的操作，如下图所示：
1.可以通过监控添加自定义表达式，这里添加了max和i。
2.点击调试工具第4个按钮，或者按"F10",则单步跳过，进入下一语句（以后简称为“单步跳过调试”），此时可以看到i的值变更为1;
2.单步跳过调试，由于i<max判断成立，firefox进入13行[-alert('点击次数为:'+i)]语句；
4.单步跳过调试，firefox执行alert语句，弹出提示窗口；
5.点击弹出窗口的“确定”按钮，自动进入15行[console.log()]；
5.单步跳过调试，控制台输出“点击次数为:1，最多点击次数为:5 ”；
6.clickme方法调用结束，进入clickme方法调用者onclick；
最终效果如下所示；
6.firebug-网络
该工具主要用与查看页面的请求资源的状态和返回的内容，主要用于ajax请求调试，页面引入的js/css/img资源地址是否正确等。还可以过滤各种请求类型。
当然我们还可以通过firebug来破解某些视频资源的最终内容地址。