|
2.6 JavaScript调试工具 一直以来，Java开发过程的进步与其调试架构是分不开的，这种调试架构使在源代码中一步一步地调试程序变得非常简单。当今的很多Java IDE都具有异常强大的调试环境，它们允许你调试标准的Java SE应用、部署到本地Java EE应用服务器上的应用，甚至是部署到远程Java EE服务器上的应用。 调试传统的JavaScript要比Java困难得多，因为JavaScript缺少一个高质量的调试环境。这一缺陷现在得到了改善。作为基于Mozilla的浏览器（如Firefox）的扩展，Venkman JavaScript调试器提供了一个功能完整的JavaScript调试环境。 下面我们将简单介绍Venkman及其功能。可以在www.svendtofte.com/code/learning_venkman上找到一份更全面的教程。 使用Venkman 可以从www.mozilla.org/projects/venkman/获得Venkman。Venkman的开发始于2001年4月，由Robert Ginda发起。Venkman基于Mozilla的名为js/jsd的JavaScript调试API。js/jsd API构成了Netscape JavaScript调试器的基础，后者可以用在Netscape浏览器的4.x系列版本中。 在安装好Venkman之后，可以通过Firefox中的Tools→JavaScript Debugger菜单项启动它。图2-17展示了Venkman的默认布局。 Venkman提供了非常多的信息，这些信息分别显示在8个窗格中。默认布局中有一个较大的窗格用来显示选中的源代码。窗口的左边垂直排列着三个较小的窗格。在Source Code窗格下方是Venkman的命令行界面，它位于窗口的底部。 可以用鼠标拖动每个窗口并把它们放置到主窗口的任意位置。还可以把一个窗格添加为另一个现有窗格的独立标签页。例如，根据图2-17，如果想要把Loaded Scripts标签页放置到Local Variables窗格中，只需把Loaded Scripts标签页拖放至Local Variables标签页即可。也可以把窗格从主窗口中分离出来，只需单击窗格标题栏左侧的控制按钮即可。再次单击该控制按钮就可以使窗格回到主窗口中。
图2-17 Venkman的默认窗口布局 在使用Venkman的过程中，你会根据自己的需要经常使用几个面板。单击窗格标题栏右侧的×按钮可以关闭不常用的窗格。可以通过选择View→Show/Hide来重新打开这些窗格。如果想恢复窗格布局的默认设置，只需在Interactive Session窗格中的命令行界面中输入/restore-layout factory即可。 1. 查看已加载的脚本 启动Venkman后，它会识别浏览器窗口中当前页面上所有可用的JavaScript。Venkman可以识别出在HTML页面中使用<script>标签嵌入的JavaScript以及使用<script src="js_file.js">标签引入的外部JavaScript文件。 Venkman把当前可用的JavaScript显示在Loaded Scripts窗格中。单击每个文件边上的加号可以打开一个文件内部信息列表，它详细列出了文件中所有可用的JavaScript函数以及这些函数出现在文件中的行号。另外，它还可以显示函数所包含的代码行号。在Loaded Scripts窗格中双击一个函数会在Source Code窗格中显示该文件并直接滚动到该函数所在的位置。 右键单击Loaded Scripts窗格中的文件会为文件本身和文件中的JavaScript函数显示出一些选项。对文件来说，这个右键菜单允许你执行如下一些操作，比如禁止调试eval和timeout声明，禁止调试函数，以及禁止对函数进行性能监控。对单个函数来说，这个右键菜单提供了禁止调试和禁止性能分析的功能。 2. 源代码 Source Code窗格会列出当前文件的源代码。文件的类型可以是HTML、XHTML或JavaScript。Source Code窗格实现了标签页机制，因此可以一次打开多个文件，每个文件都显示在自己的标签页中。Venkman会使用一些简单的颜色显示代码，这样可以提高可读性。JavaScript关键字如function和var会显示为粗体，字符串则会显示为不同的颜色。窗格左侧是文件的代码行编号，再左侧是用于设置断点的侧边栏。 3. 断点 Venkman支持两种断点：硬（hard）断点和将来（future）断点。这与绝大多数调试环境都不太一样，因此我们会讨论这两种断点间的区别。 硬断点就是你经常在像Java这样的现代编程语言中使用的断点。它会指示Venkman在断点处挂起程序的执行。在收到用户的指示之前，程序不能继续执行。在Venkman中，硬断点总是设置在函数体内。 将来断点与硬断点类似，它也指示Venkman在断点处挂起JavaScript的执行。两者的不同之处在于，将来断点总是设置在函数体外。这些代码会在浏览器加载它们之后立即执行。相反，函数体中的代码则一直到该函数响应用户的操作或事件时才会执行。 在很大程度上，大可不必在意硬断点和将来断点之间的区别。在大部分情况下，都会使用硬断点，它们应该与其他调试环境中的断点具有相同的功能。 Venkman提供了一个列出所有当前断点的窗口。当你调试的页面在多个文件中含有多个断点的时候，这就会非常方便。所有设置了断点的文件都会显示在Breakpoints窗格中，在每个文件下面会列出这个文件的所有断点。 4. 分步执行代码 设置好断点之后，就可以开始调试代码了。Venkman会在遇到断点时自动挂起程序的执行。那时，就可以控制脚本的执行了。你可以查看变量值，修改变量值，并继续执行脚本，可以分步执行代码或重新启动并完成执行过程。 在遇到断点时，Venkman为开发人员提供了几个用来分步执行代码的选择。一旦遇到断点，可以选择Continue、Step Over、Step Into或Step Out。 Continue选项会重新启动脚本的执行。执行过程会一直继续，直到遇到另一个断点或脚本结束。当需要跟踪一个问题的位置时，Continue属性非常有用。你可以沿着程序执行链设置多个断点，并且在每次遇到断点的时候查看变量值以确定问题是否已经出现。一旦问题出现了，就可以知道这个问题是出现在当前断点和前一个断点之间，这样就可以从那里继续缩小错误出现的区域。Continue选项还可以用来调试迭代。可以在迭代的某处设置断点并使用Continue选项一次一次地执行迭代代码，并在每次挂起的时候检查是否出现任何问题。 Step Over功能可以使你避免进入当前函数调用的函数。那个被调用的函数可能已经被调试过了并且你知道问题不在那儿，或者你就是不想进入那个函数的代码，因为你只关心当前函数。需要记住的是，越过一个函数并不会影响这个函数的执行；它只是表示你不打算一行一行地调试该函数。 Step Into选项和Step Over功能正好相反。Step Into会进入一个被调用的函数，这样就可以调试这个被调用的函数了。合理使用Step Over和Step Into可以帮助你确定错误的具体位置。 5. 局部变量列表 Local Variables窗格允许你在脚本运行时查看甚至修改变量的值。每当遇到断点并挂起脚本执行时，Local Variables窗格就会显示当前作用域内的所有变量。 Local Variables窗格具有两个顶级项：Scope和This。Scope指向程序执行的当前最近作用域内的所有变量。因为大多数JavaScript都会被编写为函数，所以这个最近作用域往往是函数作用域。例如，如果遇到了一个函数内的断点，那么Local Variables窗格中的Scope项就会指向该函数作用域内的所有变量——也就是在该函数中使用关键字var定义的任何变量。从技术上来说，函数可以访问那些定义在全局作用域内的变量（定义在函数体外的变量），但是它们不会显示在当前变量作用域中。 Local Variables窗格中显示的第二个顶级项是This项。This项指向关键字this指代的任何对象。如果在一个函数中遇到断点，而这个函数又是一个对象的一部分，那么this指代的就是当前对象的实例。正常情况下，this引用的是浏览器的window对象。需要注意的是，在全局作用域内定义的任何变量都会出现在This项下面。 局部变量列表还允许在运行时修改变量的值。这一功能非常强大，它可以帮助你测试不同变量值对脚本输出的影响。当你觉得自己发现了一个问题的时候，还可以使用这一功能修改变量的值，看看是否可以解决这个问题。 右键单击想要修改的变量值，在右键菜单中选择Change Value。这会打开一个提示窗口，可以在里面修改变量的值。可以在提示窗口中输入任何合法的JavaScript表达式，包括new Object()这样的表达式。确保所有的字符串都加上了双引号或单引号。记住，在提示窗口中还可以通过变量名引用其他变量。 |
|
|
