以前我比较轻视javascript,但在的工作中越来越感觉到它的重要,测试部给我报的bug也多半源于此,所以决心补习js,那么首先要搞定的就是调试器,发现firefox 下的venkman很不错,强大 小巧,而且免费。
基于Mozilla的浏览器(如firefox)有个JavaScript调试环境,叫venkman,可以从http://www.hacksrus.com/~ginda/venkman/下载,然后用firefox打开得到的xpi文件,它就会自动安装,重启firefox,选择工具->JavaScript Debugger 启动venkman,如图,
窗口布局很清晰,Loaded Scripts窗口中显示当前可用的javascript,点击文件旁边的加号,就会打开一个详细列表,列出该文件中的所有函数,其他窗口不用多说了。
断点跟踪才是我们关注的重点,venkman支持两种断点:硬(hard)端点和将来(future)断点。
两者的区别是,将来断点设置在函数体之外的代码行上。一旦这些代码行加载到浏览器上就会立即执行。与之相反,只有当为响应某个动作或事件执行了函数时,位于函数体内的代码才会?葱小?
看例子,一个js文件 DebugSample.js,和一个调用页面CallPage.html
// DebugSample.js
var dateString = new Date().toString();
function doFoo(){
var x = 2 + 2;
var y = "hello";
alert("test");
}
// CallPage.html
<html>
<title>test page</title>
<script language="JavaScript" src="DebugSample.js"></script>
<body>
<form id="test">
<input type="button" value="test" onclick="doFoo()"/>
</form>
</body>
</html>
用firefox打开CallPage.html,启动venkman,在所需的代码行上设置一个断点,点击代码行左侧的边栏即可。每次点击这一行时,这行就会轮流的切换为以下3种:无断点、硬断点、将来断点。硬断点由一个红色的B指示,将来断点有橙色的F指示。函数体外的代码行只能切换为无断点和将来断点。
我们在var y = "hello";这一行设个断点
然后点击页面的“test”按钮,可以看到在断点处停止了
接下来的操作想必都知道了,它和其他的debugger用法相同,下面看一下venkman的一个强大特性,可?员嘈炊ㄖ拼耄⒃诿看沃葱卸系闶痹诵姓庑┒ㄖ拼搿T?Breakpoints窗口中,右键点击一个断点,选择Breakpoint Properties(断点属性)
这样会打开Breakpoint Properties对话框,允许你修改断点的行为
这个窗口的强大之处在于“Wen triggered, execute…”(如果触发,则执行…),选中这个复选框,会置一个文本框有效,可以编写js代码,每次遇到断点时都会执行此代码,向这个定制脚本传递的参数名为_count_,它表示遇到断点的次数,下面的4个行为中也以“Stop if result is true”的功能最强大,它意味着只有当定制代码的返回值为true时断点才会暂停执行。
想象一下,假设你在迭代处理一个很大的对象列表,开发过程中,你注意到,计算时在一个特定对象处失败了。如果只是处理单个对象或只是个小的对象列表,则没有问题,在循环中设个断点,进行跟踪,但如果列表很大,这样每个循环都进就很麻烦,这时就可以使用条件断点功能,知道某种情况会失败,编一个条件语句,满足条件时断点才暂停。
继续看例子,在上面的DebugSample.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;
}
}
把CallPage.html中按钮的onclick改为onclick="testBreakpointProperties()",在venkman中设置断点
右键点击红色断点标记,选择Breakpoint Properties,打开对话框,选择“Wen triggered, execute…”,在文本框中输入“return item == "seven";”,再选择“Stop if result is true”,在页面点击“test”按钮会进入venkman,这时item的值为“seven”,很方便吧,省去了我们自己一个一个循环的跟踪。
Venkman的确很不错,有了它我更喜欢写js了,但也发现个比较烦的怪问题,用完一次Venkman后关闭,再想打开它就不行了,得注销,重登陆后才能再打开,这在工作环境下是不可思议的,所以打开他后我就不敢关了,愁啊。