Venkman入门之调试

调试

处理AJAX应用的怪异行为一直以来都是Web开发者最头疼的问题，因为直到目前为止，几乎没有什么已经存在的工具可以帮助处理这些问题。与其他语言不同，其他语言可以采用IDE负责调试任务，例如栈跟踪和逐句通过（stepping through）代码，JavaScript盲目的执行在Web浏览器中，当程序出错时，没有任何有用的反馈。当经常看到众所周知的“null is null or not an object”错误消息时，你就明白我们在讨论什么内容了。另外一个问题是当XHR请求发生错误时，应该如何排查并且修正这些错误？对于这些问题，有许多优秀的工具可用来简化开发。

1．Venkman

对于JavaScript调试，其中一种最为强大的工具是Mozilla的JavaScript调试器，也称为Venkman ，这个工具不仅能够帮助处理基本语法检查，而且还能够设置断点、检查变量的上下文（有没有曾经想知道在任意时刻的this的引用指的是什么？），逐句通过（stepping through）代码和执行调用栈导航。这个工具仅仅用于Mozilla产品（包括Firefox），但也意味着可以工作在MacOS、Linux和Windows操作系统之上。对于调试IE产生的问题通常也能够起到帮助作用，因为JavaScript中的大部分内容在不同的浏览器中是相同的。

Venkman调试器包括6个常见区域。已加载的脚本面板（Loaded Scripts panel）显示了当前页面中包含的脚本文件。通过单击面板中JavaScript文件旁边的展开/关闭（expand/collapse）三角形，我们可以浏览文件中的不同函数。

局部变量面板（Local Variables panel）支持在代码执行时跟踪变量的值。

断点面板（Venkman调试器）的监视（Breakpoints panel Watch）和断点面板允许你指定何时开始调试、何时停止执行等操作。

调用栈面板（Call Stack panel）显示了当前位于代码的哪个位置。通过这个窗口，我们常常可以判断出正在执行哪些函数以及哪个函数调用了这个函数。

源代码视图（Source Code view）显示了正在调试的实际的JavaScript代码。

交互会话面板（Interactive Session panel）提供了可以交互工作的命令行。输入/help可以获得命令帮助。

图5-13　Mozila的Venkman JavaScript 调试器

 

2．MS脚本调试器

微软公司和Venkman相同的产品是MS脚本调试器 （参见图5-14），而且也是免费的。我们可以基于Script Debugger使用交互控制台并且查看栈跟踪信息，如图5-14所示。如果你需要一些工具调试IE，这个工具确实很有用。我们在Visual Studio中可以找到更出色的解决方案。基于Visual Studio，我们能够对变量设置监视，创建断点，并且逐句通过代码，这些都是快速高效地进行调试所需的功能。使用哪种工具和个人偏好有关，我们可能不需要同时使用两种工具。这两种工具都只在Windows中的IE上工作，不过，如果编写跨平台支持的程序，我们可能想要从Venkman着手开始使用。如果你确实需要在IE中使用调试功能，首先，你同样首先需要确信在IE高级设置中取消对禁用脚本调试选项的选择（工具→Internet选项→高级），从而在浏览器中支持调试。

图5-14　MS脚本调试器

 

这里要指出的另一个要点是debugger关键字的使用。这个关键字可能是所有JavaScript中最为有用的功能之一。其本质是如何能在代码中设置断点，并且不仅仅能运行在IE中，同样还能运行在Firefox的Firebug操作中。

3．Firebug

目前用于JavaScript调试、DOM查看（DOM inspection）、网络状况监视（network sniffing）及其相互协作的最优秀的解决方案是Firefox的Firebug工具 。这个工具的调试能力正如你所预期的，使用debugger语句来设置断点，单步执行（stepping into）、逐过程（stepping over）和跳出（stepping out）函数调用，并在浏览器中查看代码。Firebug支持点击式（point-and-click）DOM查看和简单实时编辑DOM结构和CSS属性。Firebug最为有用和与众不同的部分是Console功能，这个功能允许开发者在当前页面的上下文中输入并执行任意的JavaScript。Console同时还能够用于显示来自JavaScript代码中的日志或者调试信息。我们不用alert()来进行快速而随意的调试，只使用Firebug的console.log("Welcome %s",username)方法支持printf功能，例如用于替代字符串的%s、用于替代数值的%d、%i、%f和用于替代对象的%o。console.log()方法使用很方便，因为这个方法以一种可读性很好的方式输出诸如数组或者HTML元素的复杂对象。console. trace()能够用于输出栈跟踪，console.time("name")和console.timeEnd("name")能够特定用于内联的特定计时信息。

在最新的Firebug版本1.0中提供了对所有的XHR请求和诸如图片和CSS等下载资源的网络状态监视和报告的功能。这个功能能够让开发者敏锐地觉察到网络架构的瓶颈在哪里。最新版本Firebug的另一个新功能是Web页面的性能分析。当登录GMail时，单击性能分析（Profile）按钮将触发Firebug跟踪所有的JavaScript代码的执行情况并以一种容易阅读的格式输出结果，如图5-15所示。

（点击查看大图）图5-15　Firebug JavaScript性能分析报告

 

4．Microsoft Developer Toolbar

DOM调试器服务的目标与脚本调试器略为不同。MS Developer Toolbar就是其中的一种DOM调试器 。这个工具不是让你调试JavaScript，而是支持通过点击页面上的对象进行查看，以树形视图查看DOM结构，并查看和设置DOM结点上的CSS属性，如图5-16所示。该工具安装在浏览器内部，是浏览器的一个辅助插件，在需要使用这个工具时，这种方式能够极其方便快速地执行加载。

（点击查看大图）图5-16　Microsoft Developer Toolbar

 

5．Fiddler

为了解决HTTP请求的调试，可以在Windows上使用的是Fiddler 软件，这个软件允许开发者查看发送到服务器的HTTP请求的所有细节，执行性能分析（性能分析能够回答这样的问题：“为什么我的应用下载耗费这么长的时间？”），查看哪些信息缓存了，哪些信息没有缓存，甚至是执行自动测试，如图5-17所示。Fiddler包括一个在IE中使用的内置的浏览器辅助对象，但是也可以通过设置代理在Firefox中使用。

图5-17　Microsoft Fiddler

 

6．Safari

虽然Safari已经改进了错误日志记录功能，但是调试AJAX应用仍然比较困难。Safari支持一个调试窗口，可以通过控制台开启激活。具体激活操作可以在终端窗口（应用→终端辅助工具）输入以下命令：

defaults write com.apple.safari IncludeDebugMenu 1

 

接着启动Safari并且在调试（Debug）菜单中选择记录JavaScript异常（Log JavaScript Exceptions）选项。在Safari1.3或者以上版本中，选择显示JavaScript控制台（Show JavaScript Console）菜单选项。对于更早的版本，JavaScript异常出现在控制台应用（应用→辅助工具→控制台）中。

幸好，Safari1.3和更高的版本支持通过window.console.log()明确地记录来自JavaScript的任意信息，类似Firebug中的console.log()。所有的信息都发送到JavaScript控制台窗口并显示成暗绿色。

Safari中来自WebKit的Web Inspector工具 可以用于支持DOM查看。Web Inspector提供的特性类似于Web Developer Toolbar和Firebug，并且支持点击式DOM查看。