【转】Firefox下的Venkman调试器

Reference from :

http://book.51cto.com/art/200810/91473.htm

 

 

1.5.2  Firefox下的Venkman调试器（1）

Firefox有自己的JavaScript脚本调试器Venkman，目前Venkman的版本是0.9.87。

1．Venkman的安装

Venkman是Firefox的插件，使用前需要下载安装，而且需要在Firefox环境下安装。登录Venkman官方网站：http://www.mozilla.org/projects/venkman/，单击如图1.39所示的Download latest Venkman Javascript Debugger extension for Firefox超链接，跳转到下载安装页面。单击如图1.40所示的Install Now按钮，Firefox中会弹出"软件安装"对话框，要求用户确认安装，如图1.41所示。用户确认后，系统自动安装Venkman。安装完成后，重启Firefox，Venkman就能正常使用了。至此，Venkman安装完成。

 

（点击查看大图）图1.39  Venkman下载链接

 

图1.40  Venkman安装链接

 

图1.41  Firefox"软件安装"对话框

在Firefox 1.5和Firefox 2.0下Venkman会有缺陷：打开Venkman，关闭之后，无法再次打开。按照官方网站的解决办法--重启Firefox，问题才能解决（不同版本的Firefox，可能会有不同的效果，本书使用的Firefox版本是2.0.8）。

2．在Firefox中启动Venkman

在Firefox中选择"工具"→"JavaScript Debugger"命令，即可打开Venkman，如图1.42所示。

 

（点击查看大图）图1.42  在Firefox中打开Venkman

Venkman运行界面如图1.43所示，除了基本的菜单栏、工具栏、状态栏外，还有打开文件列表、本地变量列表、断点列表、当前文件名、源代码窗口、信息输出窗口和命令输入框等。

3．使用Venkman调试JavaScript

（1）测试Venkman是否正常运行

用Firefox打开需要调试的文件，启动Venkman，在命令输入框中输入"1+1"，测试Venkman是否正常运行，效果如图1.44所示。

 

（点击查看大图）图1.43  Venkman运行界面

 

（点击查看大图）图1.44  测试调试器是否正常运行

1.5.2  Firefox下的Venkman调试器（2）

（2）设置当前调试对象

在文件列表中显示打开的文件。双击文件名，右侧的源代码区域会显示该文件的源代码。在Venkman中，需要用户指定被调试的文档为当前调试对象。首先，将打开的文件列表窗口切换至Open Windows，然后右击需要调试的文件，最后在弹出的快捷菜单中选择Set as Evaluation Object命令，即可设定需要调试的对象。指定方法如图1.45和图1.46所示。

（3）Venkman中使用命令输入框调用函数

指定调试对象后，直接在命令输入框中输入JavaScript函数名就能调用函数，Venkman即可直接操作JavaScript中的内容进行调试。例如，打开代码1.1，对代码1.1中的JavaScript进行调试。完成以上步骤以后，在命令输入框中输入函数名"hello()"，按Enter键，Venkman将控制返回到Firefox界面，直接调用hello()方法，执行与单击Hello按钮相同的操作。

用户还可以直接在命令输入框中输入JavaScript代码。例如，在命令输入框中输入"document.getElementById("hello")"，输出窗口中显示JavaScript代码的返回值[object HTMLInputElement]。如果没有得到对象，会显示null，效果如图1.47所示。

 

图1.45  打开Open Windows

 

图1.46  设置调试对象

 

图1.47  JavaScript执行效果

如果之前没有设定调试对象，在命令输入框中直接输入函数名，Venkman会在输出窗口中提示"ReferenceError: hello is not defined @ <x-jsd:interactive-session> 2"的错误信息，如图1.48中红色区域所示。

 

（点击查看大图）图1.48  Venkman未设定调试对象的提示信息

（4）Venkman中设置断点调试JavaScript

在Venkman中断点有两种类型：future断点和硬断点，如图1.43所示。JavaScript函数体以外的部分只能添加future断点。在JavaScript函数体中，单击某行，添加的是硬断点；再次单击，添加的是future断点。future断点用于控制JavaScript函数体外的代码调试。future断点、硬断点与其他调试环境中的断点作用基本是一样的，当程序运行至断点处时挂起，暂停程序的执行。future断点与硬断点的区别在于：硬断点只有当用户执行函数体对应的操作时才执行；future断点在页面加载后立即执行。大部分情况下，用户使用的是硬断点。

在Venkman中，有个Breakpoints（断点）列表窗口。该窗口中显示的是当前文件中的断点列表（如图1.43所示），用户可以清晰地看到目前文件中的断点数量、断点类型（future断点、硬断点）、断点在文件中的行数等信息。当在Venkman中打开源文件时，工具栏上用于调试的Continue（继续）、Step Over（跨过函数调用）、Step Into（进入函数调用）和Step Out（跳出函数调用）按钮都不可用，如图1.49所示，说明此时还无法进行调试。此时，只有Stop按钮可以使用。

 

图1.49  打开源文件时的调试工具栏

 

 

 

1.5.2  Firefox下的Venkman调试器（3）

用户单击Stop按钮，Venkman会停止（暂停）当前执行的脚本。如果当前没有执行任何脚本，Venkman会转到"等待事件发生"的状态。在设置了断点之后，单击Stop按钮，Venkman会打开一个空的venkman.xul文件，而且Local Variables（本地变量）列表窗口中会显示JavaScript内置的以及用户定义的变量，同时Continue按钮变为可用，而Stop按钮变为不可用，如图1.50所示。

 

（点击查看大图）图1.50  单击Stop按钮效果

单击Continue按钮，Venkman会恢复单击Stop按钮之前的状态。此时，再次单击Stop按钮，会发现Stop按钮图标改变，在图标中添加了3个白色小点（ ），此时回到Firefox浏览器中，单击"刷新"按钮，系统将自动切换至Venkman中，并且将光标停留在JavaScript函数体的第一行，效果如图1.51所示。

 

（点击查看大图）图1.51  刷新Firefox后的现实效果

在命令输入框中输入函数名"validate()"，程序在第一个断点处挂起，效果如图1.52所示。

 

（点击查看大图）图1.52  程序在断点处挂起效果

用户可以看到：输出窗口中，高亮显示断点行的全部代码。源代码窗口中，高亮显示断点行，并且将光标停在断点行。代码调试工具Continue、Step Over、Step Into、Step Out按钮可用。单击Step Into按钮，程序继续执行，到下一处断点挂起。用户再次单击Step Into按钮，程序再继续执行，重复操作，直到程序结束或用户中断。

如果调试过程中存在与浏览器的交互，Venkman会自动将界面切换至Firefox中，执行完毕返回Venkman。如果用户不想进入当前断点之后的函数调用调试，可以单击Step Over按钮，跳过这个函数调用。但是Step Over并不代表函数不再执行，而是用户不再进入调用函数的调试。Step Out代表不再执行函数。用户单击Step Out按钮，将不调试函数调用，直接跳过函数调用，不再执行调用的函数。

Venkman是JavaScript代码调试器，不是编辑器，因此不能在Venkman中编辑代码。使用Venkman配合UltraEdit，既可以编辑源文件，又可以调试文件脚本，可以根据调试结果随时更改源文件。