js调试系列 断点与动态调试[基础篇]
上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的。 function votePost(n,t,i) { i || (i = !1); var r = { blogApp: currentBlogApp,postId: n,voteType: t,isAbandoned: i }; $("#digg_tips").css("color","red").html("提交中..."); $.ajax({ url: "/mvc/vote/VoteBlogPost.aspx",type: "post",dataType: "json",contentType: "application/json; charset=utf-8",data: JSON.stringify(r),success: function(n) { if (n.IsSuccess) { var i = $("#" + t.toLowerCase() + "_count"); r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html()) + 1) } $("#digg_tips").html(n.Message) },error: function(n) { n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉!发生了错误!麻烦反馈至contact@cnblogs.com") : $("#digg_tips").html(n.responseText)) } }); } 差不多就这个样子的。 简单读过代码后,可以大致知道,这个函数有 3 个参数,第一个是 postId,就是文章ID,第二个是 推荐(digg) 或者 反对(bury), 可能有的新人朋友问了,你怎么知道 currentBlogApp,n,i 是什么值呢? so easy,我们就定位到了源码。 接下来我们点下92那个数字,进行下断点操作。 为什么不是在91行下断点呢? 因为91行是函数声明部分,没法下断点,我们在函数要执行的代码处下断点才行。 看到 91 行的行号变成蓝色了,表示这个地方已经下了断点了。同时,我们可以在右侧 Breakpoints 一栏里看到已下的断点。 Breakpoints 这个一栏是管理所有断点的,可以方便的跳转到对应断点的位置出,以后常常会用到哦。 现在下完断点了,我们回头点下 推荐。。(虽然感觉我在骗推荐,不过我真心没这么想,当初是随便找了个按钮当练习的。) 现在,你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。 Scope Variables栏目会显示当前作用域以及他的父级作用域,以及闭包。 是不是超方便。。(我初学闭包的时候,Scope Variables帮了我不少呢。) 我们进行下一步,按3次 F10 就可以看到这样的东西。 我们每按一次 F10 会执行一条语句,刚才按了3次,就是执行到了 $("#digg_tips").css("color","red").html("提交中..."); 所以我们可以在页面上看到 #digg_tips 显示提交中的字样。 可是当我们再次按 F10 的时候,发现他一路执行下去,而没有进入 ajax 内部的回调函数。 这是个纠结的问题,也是我要重点说的。 现在,我们就可以调试回调数据了,同时可以发现右侧 Scope Variables 多了一个 Closure 的东西,这个就是闭包。 如果现在理解不了,那就过,这东西要大篇幅介绍,不是三言两句就能讲明白的,反正控制台很强大就对了。 在看到闭包的同时,我们也看到 ajax 的返回数据 n,很明显,我的 IsSuccess 属性为 false 没有成功,因为他返回了一个信息 "不能推荐自己的内容"。 是不是很有意思,动态调试,让寻找BUG变得 so easy。 接下来,我们来实验第三个参数。 在这里我们非常清楚的看到,当第三个参数为 true 的时候,确实是取消推荐了,同时你可以看到推荐数确实 -1 了,哪怕刷新也一样。 本次我们用到了两个快捷键 F10 和 F8,明天详细介绍,今天先学会基础调试先。 课后练习:(提高下难度) 如果不会这个练习,推荐看下 《浅谈 jQuery 事件源码定位问题》,有详细分析哦。 本文来自:博客园博主 乱码 的文章。http://www.cnblogs.com/52cik/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |