火狐js调试插件venkman使用

做为基于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()这样的表达式。确保全部的字符串都加上了双引号或单引号。记住，在提示窗口中还能够经过变量名引用其余变量。

原文: http://book.csdn.net/bookfiles/275/10027512100.shtml