调试JavaScript脚本程序（Firefox篇） 

　准备工作

　　调试Firefox里面的脚本需要安装一个插件Venkman：

　　1.　　　　　　 启动Firefox，浏览页面

　　https://addons.mozilla.org/en-US/firefox/addon/216

　　2.　　　　　　 点击“Add to firefox”，重启Firefox就可以使用了。

　　下面的程序是一个测试程序，由两个文件组成:

　　Test.html

<html>
 　　 <head>
 　　　　　 <script type="text/javascript" src="http://tech.ddvip.com/2009-09/test.js"></script>
 　　　　　 <script language="javascript">
 　　　　　　　　　 function SamePageMethod()
 　　　　　　　　　 {
 　　　　　　　　　　　　　 var i = 2 * 4;
 　　　　　　　　　　　　　 alert(i);
 　　　　　　　　　 }
 　　　　　 </script>
 　　 </head>
 　
 　　 <body>
 　　　　　 <input type="button" value="click function in same page" 
 　　　　　　　　　　　　 onclick="SamePageMethod();" >
 　　　　　 <input type="button" value="click function in js file" 
 　　　　　　　　　　　　 onclick="JsFileMethod();" >
 　　 </body>
 </html>
　　Test.js
function JsFileMethod() {
 　　　 var i = 2 * 4;
 　　　 alert("JSFileMethod: " + i);
 }

　　Firefox脚本调试基础


编缉推荐阅读以下文章

  • 调试JavaScript/VB Script脚本程序（ASP.NET篇）
  • 调试JavaScript/VB Script脚本程序（ASP篇）
  • 调试JavaScript/VB Script脚本程序（Wscript篇）
  • 调试JavaScript/VB Script脚本程序（IE篇）
  • 在Visual Studio中调试JavaScript



　　先简单地介绍一下如何在Venkman里面设置断点和查看变量的值。

　　1.　　　　　　 启动Firefox，运行网页到test.html。

　　2.　　　　　　 点击Firefox菜单里面的“工具（Tools）”—“JavaScript调试器（JavaScript Debugger）”启动Venkman。

　　或者

　　在Firefox的地址栏里面输入：“x-jsd:debugger”（是不是有点象IE 8.0里面的脚本调试器启动的方式？）

　　3.　　　　　　 下面的窗口就是Venkman的启动画面：

　　

　　a.　　　　　　 在“Loaded Scripts（已加载的脚本）”窗口里面会显示当前网页里面已经加载的脚本程序，和解析出来的函数列表。

　　或者，你可以在“Open Windows（已打开的窗口）”窗口里面，选择网页列表，然后通过点击网页名称查看各个网页引用到的脚本。

　　b.　　　　　 双击一个脚本文件或者函数名以后，在“source code（源代码）”窗口里面就会显示相应的代码。需要注意的是最左边的那一列，如果上面有“--”标志，说明你可以在上面设置断点，否则的话，就设置不了断点（当然啦，上面的图片的确有一点怪啦……）。

　　c.　　　　　　 如果你不知道网页下一行要执行什么代码，那么就直接点击“Stop（停止）”按钮就可以了。


编缉推荐阅读以下文章

  • 调试JavaScript/VB Script脚本程序（ASP.NET篇）
  • 调试JavaScript/VB Script脚本程序（ASP篇）
  • 调试JavaScript/VB Script脚本程序（Wscript篇）
  • 调试JavaScript/VB Script脚本程序（IE篇）
  • 在Visual Studio中调试JavaScript



　　i.　　　　　 如果Firefox正在执行一个脚本程序，那么它会中断这个脚本程序的执行；

　　ii.　　　　　 否则，Firefox会在执行下一条脚本程序的之前停止程序的执行。如果是这种情况，那么“Stop（停止）”看起来会是下面这样：

　　4.　　　　　　 设置断点很简单，就是在“source code（源代码）”窗口有“--”标志的代码行里面点一下就可以了。代码中断以后，你就可以查看一些变量的值了。例如“Local Variables（局部变量）”窗口显示了所有局部变量的信息，而“Watches（监视）”窗口可以输入和跟踪一些表达式的值（当然也包括变量的值）。如下图所示：

　　

　　5.　　　　　　 而“Interactive Session（交互调试窗口）”提供的功能就更强大了，你可以直接输入一些JavaScript表达式，Venkman会显示计算结果：