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

上几篇文章已经为大家介绍了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 源码处,(这个昨天说过了,不太懂的话,再回去看看先。)


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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索断点
动态调试
javascript断点调试、ios断点调试技巧、vs2010断点调试技巧、javascript调试技巧、荒野求生技巧基础篇,以便于您获取更多的相关知识。

时间: 2025-01-02 08:31:53

js调试系列 断点与动态调试[基础篇]_javascript技巧的相关文章

浅析JS中对函数function的理解(基础篇)_javascript技巧

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念: var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐 Function的构造函数可以接收任意数量的参

js调试系列 源码定位与调试[基础篇]_javascript技巧

我们先来处理第一个问题:1. 查看文章下方 推荐 这个功能所调用的函数源码 其实非常简单,点放大镜选中那个推荐即可. 这个  votePost(cb_entryId,'Digg')  就是推荐按钮所调用的函数了,是不是非常简单. 第二个问题,定位到函数所在文件位置. 其实也是非常简单的,当然,不熟悉控制台的朋友也许不知道怎么看. 我在控制台输入 votePost 然后回车, 函数源码粗显啦,并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7A

JS实现向表格中动态添加行的方法_javascript技巧

本文实例讲述了JS实现向表格中动态添加行的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行 <!DOCTYPE html> <html> <head> <script> function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.ins

javascript入门教程基础篇_javascript技巧

一. 简介 1. 什么是javascript JavaScript 是网景(Netscape)公司开发的一种基于客户端浏览器.面向(基于)对象.事件驱动式的网页脚本语言. 2. 为什么要使用javascript 表单验证 网页特效 小游戏 Ajax 3.快速入门 在程序中,如果想编写js代码,有两种办法: 1)在html文件中,在一对script标记中,直接编写 <script language='javascript'> document.write('hello'); </scrip

JavaScript弹窗基础篇_javascript技巧

confirm()意既确认框 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>confirm</title> </head> <body> <script> var con=confirm("do you like to study javascript?"); if (con) { do

JS中BOM相关知识点总结(必看篇)_javascript技巧

window对象 ECMAScript是JavaScript的核心,但是如果要在web中使用javascript,那么BOM(浏览器对象模型)才是真正的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象:BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 因此,所有全局作用域中声明的变量.函数都会变成w

js调试系列 控制台命令行API使用方法_javascript技巧

先打开百度,然后按 F12 打开后,如果不是 Console 项的就点击 Console 这项,因为我们要在控制台操作.. 看到如下内容: 好了我们先清空内容,可以右击选 Clear console 菜单,或者输入 clear() 都行. 接着,我们输入 document.getElementById('kw1'); 然后回车,就可以看到 id 为 kw1 的元素信息了. 是不是很简单.下一步是用 console.dir 查看该元素信息. 输入 console.dir(document.getE

JS组件系列之Bootstrap Icon图标选择组件_javascript技巧

前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的class样式.于是乎各种百度,皇天不负有心人,最后被博主找到了,感觉效果还不错,并且支持自定义的图标,今天就拿出来分享下,绝对的干货哦! 一.Bootstrap icon picker组件 这个组件是在github上面搜索的时候找到的,初初看上去,确实是很不错的,并且是基于bootstrap风格的

js跨域资源共享 基础篇_javascript技巧

本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)?    因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨浏览器) // 跨浏览器创建并返回CORS对象 // param method : 请求的方式, get or post // param url : 跨域请求的url // return xhr : 返回的跨域资源对象 function createCORSRe