现在的位置: 首页 > 综合 > 正文

JavaScript 调试器 firefox venkman

2013年10月03日 ⁄ 综合 ⁄ 共 2417字 ⁄ 字号 评论关闭

JavaScript 调试器 firefox venkman

 

以前我比较轻视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后关闭,再想打开它就不行了,得注销,重登陆后才能再打开,这在工作环境下是不可思议的,所以打开他后我就不敢关了,愁啊。

抱歉!评论已关闭.