js调试系列目录:
-

额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧。

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

  1. function votePost(n, t, i) {
  2. i || (i = !1);
  3. var r = {
  4. blogApp: currentBlogApp,
  5. postId: n,
  6. voteType: t,
  7. isAbandoned: i
  8. };
  9. $("#digg_tips").css("color", "red").html("提交中...");
  10. $.ajax({
  11. url: "/mvc/vote/VoteBlogPost.aspx",
  12. type: "post",
  13. dataType: "json",
  14. contentType: "application/json; charset=utf-8",
  15. data: JSON.stringify(r),
  16. success: function(n) {
  17. if (n.IsSuccess) {
  18. var i = $("#" + t.toLowerCase() + "_count");
  19. r.isAbandoned ? $(i).html(parseInt($(i).html()) - 1) : $(i).html(parseInt($(i).html()) + 1)
  20. }
  21. $("#digg_tips").html(n.Message)
  22. },
  23. error: function(n) {
  24. n.status > 0 && (n.status == 500 ? $("#digg_tips").html("抱歉!发生了错误!麻烦反馈至contact@cnblogs.com") : $("#digg_tips").html(n.responseText))
  25. }
  26. });
  27. }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

js调试系列: 断点与动态调试[基础篇]的更多相关文章

  1. Windows程序调试系列: 使用VC++生成调试信息 转

    Windows程序调试系列: 使用VC++生成调试信息 ZhangTao,zhangtao.it@gmail.com, 译自 “Generating debug information with Vi ...

  2. cglib 动态代理基础篇

    cglib 动态代理基础篇 CGlib是什么? CGlib是一个强大的,高性能,高质量的Code生成类库.它可以在运行期扩展Java类与实现Java接口. 下面我们将通过一个具体的事例来看一下CGli ...

  3. CLR探索系列:Windbg+SOS动态调试分析托管代码

    http://blog.csdn.net/garyye/article/details/4788070   在使用VS进行托管应用程序的调试的时候,有的时候总感觉有些力不从心.譬如查看一个托管堆或者计 ...

  4. android调试系列--使用ida pro调试so

    1.工具介绍 IDA pro: 反汇编神器,可静态分析和动态调试. 模拟机或者真机:运行要调试的程序. 样本:阿里安全挑战赛第二题:http://pan.baidu.com/s/1eS9EXIM 2. ...

  5. android调试系列--使用ida pro调试原生程序

    1.工具介绍 IDA pro: 反汇编神器,可静态分析和动态调试. 模拟机或者真机:运行要调试的程序. 样本:自己编写NDK demo程序进行调试 2.前期准备 2.1  准备样本程序(假设已经配置好 ...

  6. 好未来数据中台 Node.js BFF实践(一):基础篇

    好未来数据中台 Node.js BFF实践系列文章列表: 基础篇 实战篇(TODO) 进阶篇(TODO) 好未来数据中台的Node.js中间层从7月份开始讨论可行性,截止到9月已经支持了4个平台,其中 ...

  7. Android调试系列—使用android studio调试smali代码

    1.工具介绍 使用工具 android killer:用于反编译apk包,得到smali代码 android studio:调试smali代码工具,或者使用idea,android studio就是在 ...

  8. Microsoft .Net Remoting系列专题之一:.Net Remoting基础篇

    Microsoft .Net Remoting系列专题之一 一.Remoting基础 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remotin ...

  9. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...

随机推荐

  1. kubeadm安装K8S单master双节点集群

    宿主机:master:172.16.40.97node1:172.16.40.98node2:172.16.40.99 # 一.k8s初始化环境:(三台宿主机) 关闭防火墙和selinux syste ...

  2. python爬虫-使用cookie登录

    前言: 什么是cookie? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密). 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想 ...

  3. 12.17daily_scrum

    悬浮窗的优化设计工作已经展开,各界面的测试也在有条不紊的进行,大家都尽量做到了在发现了软件自身的一些问题和bug后,做到在第一时间及时恢复和修改,工作进度的安排也在预期之中,明日的任务发布如下: 具体 ...

  4. 《Linux内核设计与实现》第一二章读书笔记

    第一章 Linux内核简介 1.Unix简介 (一)概念:支持抢占式多任务.多进程.虚拟内存.换页.动态链接和TCP/IP网络的现代化操作系统. (二)Unix特点(层次化结构): Unix很简洁,仅 ...

  5. 第二阶段Sprint9

    昨天:重新规划主界面,把视频录制暂放到主页面里 今天:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码, 遇到的问题:看不懂什么意思,照例子做不行,还得需要联网等

  6. 单片机内程序运行的时候ram空间是如何分配的?

    转自:http://blog.sina.com.cn/s/blog_a575eb9401014tam.html 单片机内程序运行的时候ram空间是如何分配的?我现对一个程序进行减少片内ram的使用的优 ...

  7. final-review

    小组名称:飞天小女警 项目名称:礼物挑选小工具 小组成员:沈柏杉(组长).程媛媛.杨钰宁.谭力铭 会议时间:12月2号12点 会议内容: 设想和目标 1.我们的软件要解决什么问题?是否定义得很清楚?是 ...

  8. java自定义注解学习(三)_注解解析及应用

    上篇文章已经介绍了注解的基本构成信息.这篇文章,主要介绍注解的解析.毕竟你只声明了注解,是没有用的.需要进行解析.主要就是利用反射机制在运行时进行查看和利用这些信息 常用方法汇总 在Class.Fie ...

  9. 以用户注册功能模块为例浅谈MVC架构下的JavaWeb开发流程

    JavaWeb应用开发,撇开分布式不谈,只讨论一个功能服务应用的开发,无论是使用原生的Servlet/JSP方案,还是时下的SSM架构,都有一套经过工程实践考验的最佳实践,这综合考虑了团队协作.项目管 ...

  10. Django从入门到放弃

    第一篇: web应用 HTTP协议 web框架 第二篇:Djangon简介 第三篇:路由控制 第四篇:视图层 第五篇:模版层 第六篇:模型层:单表操作,多表操作,常用(非常用)字段和参数,Django ...