调试JavaScript脚本程序（Firefox篇）

大饼小姜 2012-03-15

展开全文

调试JavaScript脚本程序（Firefox篇）

不知道有多少人为Firefox写程序？所以也就不知道会有多少人对这篇文章感兴趣，但是无论如何，为了让这一系列的文章趋于完整，我还是决定把它写下来。

准备工作

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

1. 启动Firefox，浏览页面

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

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

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

Test.html

<html>

<head>

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脚本调试基础

先简单地介绍一下如何在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（监视）”窗口可以输入和跟踪一些表达式的值（当然也包括变量的值）。如下图所示：