JavaScript调试技巧之：断点调试(2)

上次总结了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语句上了。

总结

有时候我们为了实现JavaScript程序的cross-browser，即兼容若干浏览器版本，会希望在不同浏览器上进行调试。IE8开发者工具出现之后，几大浏览器都可以调试了。先不论好不好用，总算都有了！

我的个人习惯是：对于一般的功能性调试，使用Firebug即可满足需求。Firefox扩展开发需要调试的，使用JavaScript Debugger（Venkman），页面脚本一般不用这个，因为它启动比较慢。对于浏览器兼容性需要的调试，使用该浏览器的开发者工具即可。对于IE6的调试……%￥……%……&×&×#￥%￥@@，我是没别的办法，只能用眼睛来调了……

欢迎交流！

 

来自：http://jsfox.cn/blog/javascript/debug-js-using-break-points-part2.html