在浏览器中调试web页面（二）：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的断点，变量监控

??
?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.单步跳过调试，控制台输出
6.firebug-网络
??? 该工具主要用与查看页面的请求资源的状态和返回的内容，主要用于ajax请求调试，页面引入的js/css/img资源地址是否正确等。还可以过滤各种请求类型。
??? 当然我们还可以通过firebug来破解某些视频资源的最终内容地址。
?
?