这个我来帮你解决 嘿嘿!
Venkman(JavaScript Debugger )1、安装
Venkman为Mozilla浏览器(包括Firefox)开发的调试器自由工具。下载地址:http://www.hacksrus.com/~ginda/venkman/ ,用Firefox打开下载下来的文件,它会自动的。安装后会发现在Tools—>Web Development菜单下多了一个新的条目。当然也可以通过Firefox的插件直接安装,请看下面:
在Firefox上如下安装:打开Firefox浏览器,工具—>附加组件 ,显示如下窗口:
注:先请下载最新firefox,链接为http://ftp.mozilla.org/pub/mozilla.org/mozilla.org/firefox/nightly/latest-mozilla-central-l10n/ ,我下载的是firefox-3.7a1pre.zh-CN.win32,以前用的Firefox为3.5.3版本,装JavaScript Debugger 0.9.87.4时老时说版本不兼容,所以就换成3.7版本的了,装后就可以安装0.9.87.4版本的JavaScript Debugger了。
在附加组件窗口中点击 浏览全部附加组件 链接,显示如下窗口:
输入Venkman,并选择范围 网页开发,按提示安装即可。
我安装的fireFox与JavaScript Debugger版本如下:
2、运行
要运行Venkman,可点击Tools—>Web Development—>JavaScript Debugger来手工打开窗口,它会将所有包含JavaScript的文件自动载入到调试器窗口。
当然也可在代码中使用debugger命令,一旦遇到debugger 命令,调试器会自动开启并在这一行代码上停止执行。与IE不同的是,Mozilla不会询问你是否希望调试某个错误。
3、窗口
Venkman窗口,如下图所示,要比Microsoft Script Debugger复杂得比,当然也要强大得的多。
窗口由一些包含关于正在检查的脚本的不同信息的小窗口(也叫视图)组成。每个视图都由一些共同的组件组成,如下:
在Venkman中有八个视图可用:
Loaded Script——显示包含JavaScript的文件,HTML或者是外部JavaScript文件,然后展开每个文件会出现其中包含的函数,显示函数名和函数开始的行号。
Open
Windows——显示Mozilla打开的所有浏览器窗口(和标签页),在每个窗口下是已经载入的HTML文件,再下面是JavaScript文件的列
表,可以通过邮件点击给定文件然后选择Set As Evalution Object来在不同的窗口之间切换调试器的焦点。
Local Variables——遇到断点时,该视图中便会出现在执行的代码的范围内可用的所有变量的列表。如果变量包含的是对象,也可能展开变量名来查看对象所有的特性。在断点处停止执行后,如果要更改变量的值,只需双击变量名,然后输入新的值。
Watches——显示调试器会话的监视器的列表,监视器的工作就是监视变量值的变化。一旦变量的值发生变化,Watches视图中就会自动更新。
Breakpoints——显示调试器会话中已经注册的断点的列表。
Call Stack——遇到断点时,该视图会显示调用堆栈(到断点处的函数调用的序列)。
Source Code——显示任何包含JavaScript的文件的源代码。
Interactive session——一个传统风格的调试器的命令行界面。在这个视图中,利用文本命令几乎可以控制调试器任何方面。
interactive session(交互式会话)
窗口的右下注意到有一个名字叫“interactive
session”的面板,当你启动venkman时它就开始显示信息。带有过程处理的文本以venkman命令或其他的形式输入时以JS来执行。我们来试
试在下面的输入框中写进“1+1”,接着回车。输出箭头右边显示结果“2”。
让我们再进一步尝试,输入“b=65”[可在交互式会话中输入任何类型的代码,包括变量声明]。
因为这是JS,你不仅可以声明变量,还可以使用基础MATH,调用JS中的对象,比如:String类。试着输入:String.fromCharCode(b) + "B"
结果是AB。其他事项
注:如果视图位置弄乱了,可以使用如下命令恢复:
/restore-layout factory
在“视图”菜单中,你可以看到这两个选项“现在就保存默认版面”Save Default Layout Now和“退出时保存默认版面”Save Default Layout On Exit。如果你想为将来的用途而保存自己设置的某一个面板,记得按你的需求勾上。
值得注意的是,VENKMAN只提供查看的功能,并不能修改,它不是编辑器。
帮助文件
我们只需要在interactive session下的输入框中写:/help 或者是/help commandname
就可以看到浏览器中显示出的帮助文件。4、Loaded Script面板
对于loaded Script面板中的每个文件,都可由你决定包含在其中的脚本是否该被调试。右击这个文件并选择File Options,会出现一个子菜单,如下,从中可以控制调试以及profiling。
如
果不想调试文件中的任何代码,点击Don't Debug Contained
Functions(默认情况下,所有的函数都会被调试)。这个菜单还可以防止调试eval()或者时段(timeout)的代码,选择 Dont
Debugging Eval/Timeout。
默认情况下,Venkman会只显示已经载入到浏览器的文件;不过,它也可以载入浏览器在后台额外载入的所有文件。取消上下文菜单中的
Excluded Browser
Files上的钩就可以看到所有载入的文件。同样,在默认情况下,该面板只显示每个文件被载入的一个实例:取消上下文菜单中的Exclude
Duplicates选项,就可以看到重复的文件实例。
在Loaded
Scripts面板中的每个函数都有各自的某种程度的控制权。在函数上点击右键,会出现一个与文件上出现的上下文菜单类似的菜单。在Function
Options下面,可以点击Don't Debug来强迫调试器仅忽略这个函数而非整个文件。这在 很大程度上给了开发人员更加灵活的控制权。5、断点
Venkman 支持两种断点:硬(hard)断点和将来(future)断点。这与绝大多数调试环境都不太一样,因此我们会讨论这两种断点间的区别。
硬断点就是你经常在像Java这样的现代编程语言中使用的断点。它会指示Venkman在断点处挂起程序的执行。在收到用户的指示之前,程序不能继续执行。在 Venkman中,硬断点总是设置在函数体内。
将来断点与硬断点类似,它也指示Venkman在断点处挂起JavaScript的执行。两者的不同之处在于,将来断点总是设置在函数体外。这些代码会在浏览器加载它们之后立即执行。相反,函数体中的代码则一直到该函数响应用户的操作或事件时才会执行。
在很大程度上,大可不必在意硬断点和将来断点之间的区别。在大部分情况下,都会使用硬断点,它们应该与其他调试环境中的断点具有相同的功能。
Venkman 提供了一个列出所有当前断点的窗口。当你调试的页面在多个文件中含有多个断点的时候,这就会非常方便。所有设置了断点的文件都会显示在 Breakpoints窗格中,在每个文件下面会列出这个文件的所有断点。
在Venkman的各种设置断点的方法中,最快最简的方法就是双击包含脚本的文件,在Source
code视图中显示出代码中,找到需要设置断点的那一行代码,点击行左边的空白处(注:在可以设置断点的行旁边有一个横线)。现在看到一个B,表示设置了
一个硬断点;或者是一个F,表示调试器只能设置一个未来断点,如下图。未来断点是在脚本已经完全从内存中卸载时创建的,一旦下次这个脚本被载入(如刷新浏
览器),这个断点就会变成硬断点。
可通过双击(不是单击)左边连的空白来创建未来断点,但在单击后,就不能强制已经设置好的未来断点变成硬断点。
第二个设置断点为或者未来断点的方法是,用命令行界面和/break命令(设置硬断点)或者/fbreak(设置未来断点)。两个命令都有两个参数:要设置断点的文件名和行号。例如:
/break ThrowExample.htm 7
对于参数文件名,不需要输入完整的路径甚至连完整的文件名都不需要。只需要在已经载入到Venkman中的文件中能唯一确定一个文件的几字符就行了:
/break Thr 7
在创建断点后,断点会被存放在Breakpoints视图中的文件名下面。并且硬断点与未来断点为是分开存放的,所以你可能会在同一个文件下看到两种不同的条目。只有硬断点可以按照函数名和行号查看,未来断点只显示其文件名和行号。
还有多种清除断点的选项。首先,可以点击左边空白处的B或者F,令其变成横线。也可以在Breakpoints视图上点击右键,显示上下文菜单,从中可以选择清除一个硬断点,一个未来断点、所有硬断点或者所有的未来断点。
最后一种方法还是使用偏偏行界面,使用/clear命令(清除硬断点)或者/fclear命令(清除未来断点)。这些命令接受与/break以及/fbreak同样的参数:文件名与行号,同样不需要输入完整的文件名,所以下面两行是一样的:
/clear ThrowExample.htm 7
/clear Thr 7
还可以用/clear-all命令来清除所有的硬断点,以及用/fclear-all来清除所有的未来断点。
注:清除硬断点时,它会自动变成未来断点,这意味着,先清除所有的硬断点,然后再清除所有的未来断点,才能真正消除所有的断点。
6、断点,第2部分
Venkman还有一个强大的特性,可以编写定制代码,并在每次执行断点时运行这些定制代码。在Breakpoints窗口中,右键点击一个断点,选择Breakpoint Properties(断点属性)菜单项,如下图:
会打开Breakpoint Properties对话框,这是一个强大的工具,允许你修改断点的行为,即定制断点的行为来满足你的需要。
在这个窗口最上面,有两个复选框:Enable Breakpoint(启用断点)和Clear Breakpoint After First
Trigger(首次触发后清除断点)。Breakpoints Properties窗口的真正强大之处在于"When
Triggered,Execute"(如果触发,则执行...)复选框,如:
选中"When Triggered,Execute"复选框,会置一个文本域有效,可以在这个文本域中编写JavaScript代码,每次遇到断点时都会执行此代码。向这个定制脚本传递的参数名为_cont_,表示遇到断点的次数。
在文本域下面,可以指它每次遇到断点时该采取怎样的行为。具体行为可以根据文本域中的定制代码的返回值决定。断点的行为有以下选择:
Continue Regardless of Result(不论结果如何都继续)
Stop Regardless of Result(不论结果如何都停止)
Stop If Result Is True(如果结果为true则停止)
Early Return from Caller with Result(带着结果从调用函数提前返回)
功能最强大的可能是 Stop If Result Is True 选项,选择这个选项的话,意味着只有当定制代码的返回值为 true 时断点才会暂停。
想象一下,如果能够根据给定条件暂定执行,这会很方便。考虑以下情况,假设你在迭代处理一个很大的对象列表,并对每个对象完成某种算。在开发过程,
你注意到,计算时在一个特定对象处失败了。如果能独立出数据源,只处理单个的对象,或者只是一个很小的对象列表,则没有任何问题,但是,如果只有当前使用
一个很大的对象列表时错误才可能现次出现,在这种情况下,倘若失败的对象则好在列表的最后。
如果使用条件断点功能,这种情况就很容易解决。如果知道某种情况会失败,可以编写一个条件语句,只有当条件满足时断点才暂停执行。
下面显示了一小段简化的JavaScript代码,这段代码只是创建一个数据,并迭代处理这个数组,对于数组中的每个串,会向该串附加另一个串。这段代码显示了如何根据你定义的一个条件来中止脚本的执行。
Js代码 function testBreakpointProperties() { var list = ['one','two','three','four','five','six','seven','eight']; var item = null; for(var i = 0; i < list.length; i++){ item = list[i]; item = 'Text is:' + item; } }
对于这个例子,你可能希望只对列表中第7项暂停执行,即
seven。如果只是在循环中设置断点,那么每次遇到这行代码时都会暂停执行,而你每次都必须手工地重新开始执行,直到列表中你感兴趣的那一项。在这个例
子中,这个列表不算长,但是如果列表中有数百项,只在满足特定条件时才中止执行就会很方便。
要想只对列表中第7项中止执行,首先在所需的行上设置一个断点(item = 'Text is:' + item
句子前加断点,其他是不行的,因为那时item还未初始化),然后右键点击这行上的任意位置,选择 Breakpoint Properties,打开
Breakpoint Properties 对话框。
假设有一个简单的场景:你希望只在处理列表中第7项(也就是串seven)时断点才真正暂停执行,选中 Triggered,Execute 复选框,启用条件式断点。在所提供的方法体中输入一行代码:
retrun item == 'sevent';
然后选中 Stop if Result Is True 单选钮,指示只有当处理的项是 seven 时才暂停代码的执行。这个断点只在第7次迭代时才暂停执行,也就是item变量处于串 seven 时才中止执行。
这是一个功能很强大的技术,在很多情况都很方便。除了前面的例子外,你可能希望每隔一次遇到断点时暂停执行。要实现这个功能,需要使用取模 %
操作符确定 _count_ 参数是奇数还是偶数,页且要设置 Stop if Result is True 选项。再举一使用 Continue
Regardless of Result 设置的例子,比如每次遇到断点时都执行某种日志记录功能。甚至可以使用Ajax技术向服务器发送日志信息。7、单步跟踪
与断点一样,也有多种方法可用于单步调试源代码。最简单的方法是,使用调试工具栏,如下图:
调试工具栏由五个按钮组成:Stop、Continue、Step Over、Step Into和Step Out。
Stop按钮可以停止当前活动的脚本,而不再继续执行以后的代码。如果任何代码正在执行,在Stop按钮上面会显示三个白点来表示调试器目前未运行任何代码。不管js是否在运行,都将停止,进入"waiting-for-something-to-happen"模式。
点击stop按钮,会激活Venkman的另一个功能,即下一次执行任
何javaScript时都会立即暂停javaScript。一旦点击stop按钮,可以相信,下一次执行任何javaScript时,Venkman就
会暂停其执行。使用setTimeout或setInterval自动运行的脚本通常很难调试,因为脚本
的入口点不好确定。通过激活Stop函数,Venkamn就能捕获到脚本的入口点,如果需要,可以从这里开始调试。
Continue按钮可以恢复脚本的执行,执行过程会一直继续,直到遇到另一个断点或脚本结束。
Step
Over(单步跳过)功能可以使你避免进入当前函数调用的函数。那个被调用的函数可能已经被调试过了并且你知道问题不在那儿,或者你就是不想进入那个函数
的代码,因为你只关心当前函数。需要记住的是,越过一个函数并不会影响这个函数的执行;它只是表示你不打算一行一行地调试该函数。
Step Into(单步进入)选项和Step Over功能正好相反。Step Into会进入一个被调用的函数,这样就可以调试这个被调用的函数了。合理使用Step Over和Step Into可以帮助你确定错误的具体位置。
Step Out(单步跳出)代表不再执行函数。用户单击Step Out按钮,将不调试函数调用,直接跳过函数调用,不再执行调用的函数,直接跳到调用的代码行。
这些动作都可以在Interactive视图中使用下命令来完成:
Stop ——/stop
Continue——/cont
Step Over——/next
Step into——/step
Step Out——/finish
代码执行停止在某一行时,则这一行会在Source Code视图中以黄颜色突出显示。另外,包含这一行代码的函数在Call Stack视图中会有一个黄颜色的箭头:
Call Stack视图中总有个_toplevel_条目来表示全局范围,这是第一个函数被调用之外。
8、局部变量表
Local Variables(局部变量)窗口允许你在脚本执行期间查看甚至修改变量值,无论遇到断点还是暂停了脚本的妊,Local Variables窗口总会显示当前作用域中的所有变量。
Local Variables窗口总是有两个顶层项:scope和this。scope
指示当前作用域中的所有变量。由于大多数JavaScript代码都写为函数,所以当前作用域通常就是函数作用域。具体来说,就是在该函数中用关键字
var定义的所有变量。注,全局作用域定义(即函数之外定义)的变量从技术上讲可以在函数中访问,但是不会显示在当前这是作用域中。
Local
Variables窗口中第二个顶层项是this。this指示关键字this引用的任何对象。如果遇到函数中的一个断点,而且这个函数是对象的一部
分,this引用的就是当前对象实例。this一般会引用浏览器的window对象,注,全局作用域中定义的所有变量都会出现在this项下面。
Local Variables窗口使用变量名旁边的小图标来指示变量数据类型。可用的数据类型包括:boolean double integer null object string void。
Local Variables窗口不仅是功能强大的调试工具,它还是一个很不错的学习工具,利用这个窗口,你可以检查任何对象属性或JavaScript解释器可用的变量。
9、Watches
Venkman其中一个独特的功能是它可以设置变量监视器。监视器可以监视变量内容的改动,并及时在Watches视图中反映出来。
要添加监视器,可在Local Varaibles视图中选择一个变量,右键点击,并选择Add Watch Expression。也可以在Interactive视图中使用/watch-expr命令来完成同样的工作:
/watch-expr variable_name
将变量加入Watches视图后,Watches视图的行为就与Local Variables视图一样了,可以显示每个变量当可用的值以及对象的特性。
Watches List(监视列表)与Local
Variables窗口几乎是一样的,它也显示运行在当前作用域中变量的相关信息。区别在于,开发人员可以决定监视列表中显示哪些变量,与此不
同,Local Variables窗口会显示当前执行脚本可用的所有变量。可以把监视列表认为是缩水后的局部这是列表。
可以向监视列表增加一个变量。
注:Venkman中的监视器都与变量名相关,但不是直接对应,所以如果在不同的范围中有两个相同的变量名,会适时显示它们的值。
10、剖析
Venkman另外一个独特的功能是,对执行进行剖析的能力。如果执行剖析(profiling),Venkman就会跟踪每个函数的情况,记录它的调用次数,每次调用花费的时间。
你可以点击工具栏上的Profile按钮来开关执行剖析功能。Venkman正在剖析时,在Profile按钮上会出现一个绿色的标志:如果未出现
标志,说明它不在进行剖析。当Venkman处于剖析模式时,可以运行你的脚本。在对测试满意后,可以在Profile—>Save
Profile Data As中保存测试结果。这里会出现Save File对话框,用于选择保存文件的位置。
默认情况下,对话框会建议将文件保存为HTML格式,但这是错误的,应该将文件保存为纯文本。
对脚本执行数据剖析后,每个函数在文件中都会有单独的一节,如下:
ThrowExample.htm: 1000 - 5000 milliseconds
Function Name: addTwoNumbers (Lines 5 - 10)
Total Calls: 1 (max recurse 0)
Total Time: 4696.75 (min/max/avg 4696.75/4696.75/4696.75)
每一节都以包含函数的文件的位置开头,接下来是包含在文件中的每一个函数。每一个函数会显示以下内容:
出现的行号;
对函数调用的总次数和最大达到的递归层次(max recurse后的数字);
运行这个函数总共使用的时间(单位:毫秒)、单个调用最短的时间和最长的时间,以及平均每次调用的时间。
这些信息对于找出代码中的瓶颈十分有用。
您好,感谢您对火狐的支持
目前使用人数比较多的是Firebug,它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。
您可以在火狐官方网站下载火狐浏览器,在火狐社区了解更多内容。希望我的回答对您有所帮助,如有疑问,欢迎继续在本平台咨询。