JavaScript调试技巧之：断点调试

首先，在各个 浏览器中，断点调试支持的最好的当然是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找到要调试的脚本（点击放大）

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文件（点击放大）

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

用JavaScript Debugger断点调试Firefox（点击放大）

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

使用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等。如果要找这方面的一些资料，我这里没有哈。

其他浏览器，主要是Opera, Safari, Chrome和IE8。这之中除了IE8，它们的调试功能都挺不错的，基本都可以搜索脚本，加入断点，查看调用栈、本地变量，以及强大的console。

1. 使用Opera的Dragonfly进行断点调试

使用Opera Dragonfly进行断点调试

 

打开Tools – Advanced – Developer Tools，即可看到类似于Firebug的开发工具，名字叫做Dragonfly，也就是蜻蜓。在这里可以查看页面结构，查看网络交互，以及断点调试，并且可以在调试过程中使用Command Line (console)。

Opera on WindowsXP也属于YUI要支持的A-grade（详见此表格），所以我们在开发的时候，也要尽量去支持。此外Dragonfly的DOM查看工具有一个亮点，Export current DOM view。我们可以在线做一些DOM改动，然后Export一下，即可得到改动后的HTML代码，非常方便。

2. 使用Chrome和Safari进行断点调试

如果你觉得 Opera太小众，那么你可以在Safari或者Chrome上进行调试。两个浏览器的调试方式、界面极其相似，所以这里以Safari 4.0为例。打开Menu – Develop – Start Debugging JavaScript，即可弹出一个调试工具。值得一提的是，Safari和Chrome的调试工具最好不要Dock到浏览器下面，因为弹出来的话，调试 界面是刚刚好的。

首先找到要调试的脚本：

使用Safari进行JavaScript调试：找到脚本

设置断点，重新加载页面（或者执行动作）：

使用Safari进行JavaScript调试：设置断点

在右侧查看本地变量和函数调用栈：

使用Safari进行JavaScript调试：变量查看

Safari的调试工具一个亮点是，console和断点调试在同一个界面上，这样可以非常方便地在程序中断时，利用console来做一些验证操作。

3. IE8的断点调试功能

IE8自带的开发者工具，虽然极其难用，但也可以断点调试。断点调试的方法与上述雷同。

使用IE8开发者工具进行断点调试

可以看 到，IE8似乎莫名其妙地终止了js代码的识别。这样的话，从74行往后，都没办法加断点了，真不可思议。但我们有时为了兼容IE，不得不在IE下进行一 些调试，怎么办呢？可以用上一篇文章的办法，在需要中断的位置加入debugger语句，这样程序运行时，IE8就会中断在debugger语句上了。