JavaScrip调试技巧之断点调试

首先,在各个浏览器中,断点调试支持的最好的当然是Firefox,Firefox不仅可以使用Firebug调试页面js脚本,还可以用高级调试工具例如JavaScript Debugger (Venkman) 来调试Firefox扩展里的js。除此之外,Firefox还支持一些更为高级的断点调试、变量监视功能。

其他浏览器里,Opera、Chrome和Safari的调试功能也比较好用。Opera的DragonFly速度相对比较快,界面清爽,功能强大,但不如Safari等友好。相比来说,IE8的程序员工具简直没法用。
这次时间有限,先来总结一下Firefox下的调试技巧。

1. 使用Firebug进行断点调试

使用Firebug调试JavaScript非常方便。具体步骤:

a. 打开Firebug后,启用“脚本”调试,找到引用的脚本文件(或者行内js);

用Firebug找到要调试的脚本(点击放大)

用Firebug找到要调试的脚本(点击放大)

b. 在适当的位置加入断点;

c. 如果断点已经执行过,则刷新页面,这时脚本就会在断点处中断。如果断点没有执行过,那可以直接执行页面上的动作(例如点击按钮等),然后代码会在断点处中断;

用Firebug进行断点调试(点击放大)

d. 观察函数调用栈,观察local变量,也可以进行单步执行,进行调试。

确实非常简单!用Firebug断点调试的优点总结如下:

能加断点的行用绿色行号,非常直观;

call stack用两种方式显示出来,很方便;

本地变量的显示非常清晰明了。

2. 使用JavaScript Debugger进行断点调试

这是老牌的调试工具,之前叫做Venkman,可以以扩展形式安装在Firefox上,我们在这里就称他为Venkman吧。它不仅能够调试页面脚本,还能调试Firefox扩展(extension)里的js。我们在做Firefox扩展开发时,Venkman是必不可少的工具,老田强力推荐!当然,Firefox本身的逻辑实现,也是用JavaScript来做到的。我们现在可以用Venkman来调试一下Firefox本身。Firefox的核心js是browser.js,在这个路径下:

chrome://browser/content/browser.js

我们打开Venkman之后,在Loaded Scripts里填入browser.js,这个js文件就会被过滤出来(如果没有看到browser.js,那么你可能需要查一下是否选上了Debug->Exclude browser files)。

Venkman:选择要调试的js文件

Venkman:选择要调试的js文件(点击放大)

我们找到让浏览器后退的代码,然后点击Firefox的后退按钮,这时Venkman就会停在BrowserBack方法上!让我们再一步一步地看一看,Firefox自己到底做了什么。btw,实现Firefox的js代码也不是很漂亮嘛~~~

用JavaScript Debugger调试Firefox

用JavaScript Debugger断点调试Firefox(点击放大)

Venkman当然也带有一个console,利用这个console,我们可以看一看浏览器层次的window和document都是什么东西。类似于Firebug和其他浏览器的console,只要直接输入js代码片段即可!

使用Venkman自带的console

使用Venkman自带的console(点击放大)

有兴趣的话,可以在这里发现更多有关Firefox开发(以及扩展开发)的好玩的东西!

3. 使用debugger在程序中加入断点

另外还有一个少为人知的断点加入方法。我们可以在程序中加入debugger语句,这样Firefox的调试工具会停留在这条语句上,代码也暂停执行,和加入断点的效果一样。例如:

var myfunc = { get_field_value_callback : function() { debugger; var ed = this, target = ed.currSpan; /* do something more */ } }

这时重新加载页面,断点就会停留在debugger语句上。这样,我们就可以在写代码时随心所欲地加入断点了。另外,其他浏览器(包括IE8!Surprise!)同样支持debugger语句!

上次总结了Firefox下进行JavaScript断点调试的技巧,这次来看一下其他浏览器下的调试。一点说明,这里的调试技巧都不借助于浏览器之外的工具,例如Aptana,VS2008等。如果要找这方面的一些资料,我这里没有哈。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzpxj.html