js调试系列断点与动态调试[基础篇]

上几篇文章已经为大家介绍了js调试系列的一些基础知识，这次乱码兄弟为大家带来了js断点与动态调试方法，需要的朋友可以参考下

昨天留的课后练习1.分析votePost函数是如何实现推荐的。
其实我们已经看到了源码，只要读下源码即可知道他是怎么实现的了。

functionvotePost(n,t,i){
i||(i=!1);
varr={
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){
vari=$("#"+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))
}
});
}

差不多就这个样子的。
ps:我用的是sublimetext格式化的代码，和chrome控制台格式化后的结果有点不同。
也可以试试这个在线格式化工具，效果差不多：OnlineJavaScriptbeautifier 

简单读过代码后，可以大致知道，这个函数有3个参数，第一个是postId，就是文章ID，第二个是推荐(digg) 或者反对(bury)，
但是第三个一直没用到，而且默认值是false
往下看，他在#digg_tips处显示"提交中..."字符串，接着通过ajax提交数据给后台。
返回数据后，如果n.IsSuccess是真就在对应的喜欢(#digg_count)或反对(#bury_count)的计数id上+1，
不过这里看到如果isAbandoned的值是真的话，就计数-1。
那我们可以猜测第三个参数是撤销推荐或者反对用的，简单说就是我点了推荐，但是我现在不想推荐了，可以传递第三个参数true实现取消推荐的作用。
我们稍后测试下。
接着是在#digg_tips处显示服务器返回的n.Message信息。
如果ajax发生错误，是500错误就提示"抱歉！发生了错误！麻烦反馈至contact@cnblogs.com"其他状态直接提示服务器返回的错误信息。
这就是大致的流程，因为这个函数简单，所以基本上一眼就看出来了。

可能有的新人朋友问了，你怎么知道currentBlogApp,n,t,i是什么值呢?
那我们来进行下一步，动态调试好了。对于编译过的项目，动态调试是非常有用的手段。
先定位到votePost源码处，(这个昨天说过了，不太懂的话，再回去看看先。)

soeasy，我们就定位到了源码。
接下来我们点下92那个数字，进行下断点操作。
为什么不是在91行下断点呢？
因为91行是函数声明部分，没法下断点，我们在函数要执行的代码处下断点才行。

看到91行的行号变成蓝色了，表示这个地方已经下了断点了。同时，我们可以在右侧Breakpoints一栏里看到已下的断点。
Breakpoints这个一栏是管理所有断点的，可以方便的跳转到对应断点的位置出，以后常常会用到哦。

现在下完断点了，我们回头点下推荐。。(虽然感觉我在骗推荐，不过我真心没这么想，当初是随便找了个按钮当练习的。)
当你点推荐按钮的时候，神奇的事情发生了，并没有运行推荐功能，而是跳到了控制台Sources面板里我们刚刚下的那个断点处。

现在，你不仅能在右侧ScopeVariables(变量作用域)一栏处看到当前变量，而且还能把鼠标直接移到任意变量上，就可以查看该变量的值。
ScopeVariables栏目会显示当前作用域以及他的父级作用域，以及闭包。
是不是超方便。。(我初学闭包的时候，ScopeVariables帮了我不少呢。)

我们进行下一步，按3次F10就可以看到这样的东西。

我们每按一次F10会执行一条语句，刚才按了3次，就是执行到了  $("#digg_tips").css("color","red").html("提交中..."); 
所以我们可以在页面上看到#digg_tips显示提交中的字样。
可是当我们再次按F10的时候，发现他一路执行下去，而没有进入ajax内部的回调函数。

这是个纠结的问题，也是我要重点说的。
像这种回调函数，特别是异步的，我们要在回调函数内部再次下一个断点。
所以我们在96行再下个断点即可，现在我们再点一下推荐依然停在了92行，我们直接按F8就可以在ajax的回调函数处断下了。

现在，我们就可以调试回调数据了，同时可以发现右侧ScopeVariables多了一个Closure的东西，这个就是闭包。
如果现在理解不了，那就过，这东西要大篇幅介绍，不是三言两句就能讲明白的，反正控制台很强大就对了。
在看到闭包的同时，我们也看到ajax的返回数据n，很明显，我的IsSuccess属性为false没有成功，因为他返回了一个信息"不能推荐自己的内容"。
是不是很有意思，动态调试，让寻找BUG变得soeasy。

接下来，我们来实验第三个参数。
我们在控制台输入 votePost(cb_entryId,"Digg",true);  然后回车。
同样停在了92行的断点处，这个里就不调试了，直接F8进入ajax的回调函数出。

在这里我们非常清楚的看到，当第三个参数为true的时候，确实是取消推荐了，同时你可以看到推荐数确实-1了，哪怕刷新也一样。

本次我们用到了两个快捷键F10和F8，明天详细介绍，今天先学会基础调试先。

课后练习：(提高下难度)
1.查看下面评论的提交评论按钮，并找到他的事件。(jQuery绑定的)
2.动态调试这个提交评论事件的执行过程。

本文来自：博客园博主乱码的文章。http://www.cnblogs.com/52cik/