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 面向对象继承
Nov 26 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
Ionic快速安装教程
Jun 03 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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用mysql数据库存储session的代码
2010/03/05 PHP
PHP Undefined index报错的修复方法
2011/07/17 PHP
php中stdClass的用法分析
2015/02/27 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python中文分词工具之结巴分词用法实例总结【经典案例】
2017/04/15 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
PHP如何去执行一个SQL语句
2016/03/05 面试题
简历中个人求职的自我评价模板
2013/11/29 职场文书
教师教学评估方案
2014/05/09 职场文书
个人校本研修方案
2014/05/26 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
公司人事管理制度
2015/08/05 职场文书
八年级物理教学反思
2016/02/19 职场文书
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL