调试JavaScript脚本程序（Firefox篇）

试Firefox里面的脚本需要安装一个插件Venkman：
1.       启动Firefox，浏览页面
https://addons.mozilla.org/en-US/firefox/addon/javascript-debugger/
2.       点击“Add to firefox”，重启Firefox就可以使用了。

<html> <head> <script type="text/javascript" src="http://jontan0121.blog.163.com/blog/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>

function JsFileMethod() { var i = 2 * 4; alert("JSFileMethod: " + i); }

Firefox脚本调试基础
先简单地介绍一下如何在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（停止）”按钮就可以了。
                                    i.      如果Firefox正在执行一个脚本程序，那么它会中断这个脚本程序的执行；

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

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

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

调试JavaScript脚本程序（Firefox篇）

猜你喜欢