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


Posted in Javascript onJune 18, 2014

上几篇文章已经为大家介绍了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)) 
  } 
 }); 
}

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

简单读过代码后,可以大致知道,这个函数有 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 源码处,(这个昨天说过了,不太懂的话,再回去看看先。)

js调试系列 断点与动态调试[基础篇]
so easy,我们就定位到了源码。
接下来我们点下92那个数字,进行下断点操作。
为什么不是在91行下断点呢?
因为91行是函数声明部分,没法下断点,我们在函数要执行的代码处下断点才行。
js调试系列 断点与动态调试[基础篇]
看到 91 行的行号变成蓝色了,表示这个地方已经下了断点了。同时,我们可以在右侧 Breakpoints 一栏里看到已下的断点。
Breakpoints 这个一栏是管理所有断点的,可以方便的跳转到对应断点的位置出,以后常常会用到哦。

现在下完断点了,我们回头点下 推荐。。(虽然感觉我在骗推荐,不过我真心没这么想,当初是随便找了个按钮当练习的。)
当你点 推荐 按钮的时候,神奇的事情发生了,并没有运行推荐功能,而是跳到了控制台 Sources 面板里我们刚刚下的那个断点处。
js调试系列 断点与动态调试[基础篇]
现在,你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。
Scope Variables栏目会显示当前作用域以及他的父级作用域,以及闭包。
是不是超方便。。(我初学闭包的时候,Scope Variables帮了我不少呢。)

我们进行下一步,按3次 F10 就可以看到这样的东西。
js调试系列 断点与动态调试[基础篇]
我们每按一次 F10 会执行一条语句,刚才按了3次,就是执行到了  $("#digg_tips").css("color", "red").html("提交中..."); 
所以我们可以在页面上看到 #digg_tips 显示提交中的字样。
可是当我们再次按 F10 的时候,发现他一路执行下去,而没有进入 ajax 内部的回调函数。

这是个纠结的问题,也是我要重点说的。
像这种回调函数,特别是异步的,我们要在回调函数内部再次下一个断点。
所以我们在 96 行再下个断点即可,现在我们再点一下 推荐 依然停在了 92 行,我们直接按 F8 就可以在 ajax 的回调函数处断下了。
js调试系列 断点与动态调试[基础篇]
现在,我们就可以调试回调数据了,同时可以发现右侧 Scope Variables 多了一个 Closure 的东西,这个就是闭包。
如果现在理解不了,那就过,这东西要大篇幅介绍,不是三言两句就能讲明白的,反正控制台很强大就对了。
在看到闭包的同时,我们也看到 ajax 的返回数据 n,很明显,我的 IsSuccess 属性为 false 没有成功,因为他返回了一个信息 "不能推荐自己的内容"。
是不是很有意思,动态调试,让寻找BUG变得 so easy。

接下来,我们来实验第三个参数。
我们在控制台输入  votePost(cb_entryId, 'Digg', true);  然后回车。
同样停在了92行的断点处,这个里就不调试了,直接F8进入 ajax 的回调函数出。
js调试系列 断点与动态调试[基础篇]
在这里我们非常清楚的看到,当第三个参数为 true 的时候,确实是取消推荐了,同时你可以看到推荐数确实 -1 了,哪怕刷新也一样。

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

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

如果不会这个练习,推荐看下 《浅谈 jQuery 事件源码定位问题》,有详细分析哦。

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

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 #Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 #Javascript
input标签内容改变的触发事件介绍
Jun 18 #Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 #Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 #Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 #Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 #Javascript
You might like
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
PHP用mysql数据库存储session的代码
2010/03/05 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
深入理解Python中装饰器的用法
2016/06/28 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
实用求职信范文分享
2013/12/25 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
元旦联欢会主持词
2014/03/26 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python