js调试系列目录:
-

昨天我们见识到了断点的强悍,在断点的配合下进行动态调试,让读代码变的轻松不少,特别是ajax之类的。
在昨天的课后练习中,确实增加了不少难度,因为 提交评论 按钮是用 jQuery 绑定的事件。
所以不能直接在元素上看到函数调用,也没办法一下子定位到函数源码处。
如果找不到源码位置,我们就没法下断点进行动态调试了。
我们来做下昨天的练习吧,先找到他的事件源码。

没发现任何有价值的东西,只是一个很普通的节点而已。。
如果不是通过 onclick 绑定是函数,我们没法直接找到他的源码处,那怎么办?
好在他用的是 jQuery, 我们根据《浅谈 jQuery 事件源码定位问题》可知,只要调用如下代码即可获得事件了。

function lookEvents (elem) {
return $._data ? $._data( elem, "events" ) : $.data( elem, "events", undefined, true );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件


经过代码格式化后,定位到如下源码处。

可是很明显,这个不是真正的源码,只是在 click 事件里调用了 commentManager.postComment 方法而已。
所以继续定位。

进入行发现如下代码

this.postComment = function() {
$("#btn_comment_submit").val()=="修改" && $("#comment_edit_id").html != "" ?commentManager.UpdateComment():commentManager.PostNewComment()
};

很明显,也不是我们要的最终代码,不过这个也非常重要,他是根据按钮值来进行提交的。
如果是 修改 按钮,就执行 UpdateComment 方法,否则就执行 PostNewComment 方法。
我们应该继续跟入 commentManager.PostNewComment 方法,走起。。

最终定位到 478 行出,这就是提交评论的按钮代码了,我们就里就不分析了,感兴趣的童鞋自己去读代码吧。
第二题 2. 动态调试这个 提交评论 事件的执行过程。
我们也不做了,源码找到了,根据昨天的步骤,自己去动态调试一遍试试。一定要动手练习一下,否则会秒忘的。
正如之前所说,如果看看就会了,那我们每个人都会是高考状元不是么。。所以还是要动手练。

我们进入今天的正题,debugger 断点。
这是什么东西呢?
字面翻译叫做 调试器,其实就是代码断点而已,用法非常简单,在你写代码的时候,想要断点调试的地方写上 debugger 即可。
如:

var a, b, c;
debugger;
a = 11;
b = 22;
c = a + b;
console.log(c);

现在你点击代码右上角的 运行 按钮试试,看到一个弹层输出 ,断点没有断下,断点坏掉了?
其实是因为你没开控制台,打开控制台后,再点击 运行按钮试试。发现已经断下了,停在如下代码处。

可能你觉得,我直接在控制台点下行号下断点不是一样么,为什么要用debugger呢?
刚才调试jQuery事件的时候,你也发现了,非常麻烦,当然如果是你自己写的项目找源码可能比较简单,
但是再简单也比不过直接在源码加上debugger方便啊。
特别是各种回调的时候就是 debugger 大显身手的时候。

好了,我们来看个综合调试练习吧。

(function(){ // 为了独立作用域
function add(a, b) {
return a + b;
}
debugger;
var sum = 0;
for (var i=0; i<10; i++) {
sum += add(i, 1);
} console.log(sum);
})();

为了独立作用域,我加了个自调用函数。


如果不加 自调用函数,add, i, sum 变量就会在 Global 下,你可以点开 Global 看看里面都有些什么。
加了个自调用函数就可以非常清晰的调试我们的代码了,所以变量都在 Local 下。
我们来看右上角的调试按钮

前四个按钮最重要,一定要记住他们的功能,后面两个按钮暂时不管。。

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数

我们分别来试试这些按钮的功能。
运行下面代码,停在了 debugger 断点处。

(function() { // 为了独立作用域
function add(a, b) {
a = a + a;
b = b + b
return a + b;
}
debugger;
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += add(i, 1);
}
debugger;
console.log(sum);
})();

我们按下 F8 看看会发生什么。
发现他停在了下一个 debugger 处,所以说 F8 是 恢复运行,但是遇到断点会继续停下。
我们重新运行代码还是停在第一个 debugger 处,来按下 F10,一直按。
会发现在 for 那里会来回跳,因为这里是循环啊。。
改按 F11 试试,你会发现执行  sum += add(i, 1);  的时候会跳到 add 函数内部代码处。
所以,我们可以知道,F10 不会进入自定义函数内部,而 F11 会进入。
就也是很多新人在调试 jQuery 代码的时候老是遇到的一个问题。
比如:

debugger;
var digg_count = $('#digg_count').html();
console.log('本篇推荐数为', digg_count);

运行后,当你按 F11,就会进入到 jQuery 库代码内部,然后你调试,越痛苦,都不知道自己在哪了。
其实方法非常简单,不小心进入到你不知道或者不想调试的函数内部时,按钮 Shift + F11 即可退回到刚才调用函数的地方。
你可以试试,当你调试这个代码的时候,不小心进入到 jQuery 内部,然后按 Shift + F11 就会到刚才那个地方,并且函数已经执行完毕了。

好了今天的内容差不多就这些了,可能感觉有点乱,今天写的比较迟,没有梳理好思路,大家将就这看吧。

js调试系列: 调试基础与技巧的更多相关文章

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

    js调试系列目录: - 额,我说的不是张敬轩的 断点 这首歌,是调试用到的断点,进入正题吧. 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的.其实我们已经看到了源码,只要读下 ...

  2. js调试系列: 源码定位与调试[基础篇]

    js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 ...

  3. js调试系列: 控制台命令行API

    js调试系列目录: - 上次初步介绍了什么是控制台,以及简单的 console.log 输出信息.最后还有两个小问题,我们就当回顾,来看下怎么操作吧. 先打开百度,然后按 F12 打开后,如果不是 C ...

  4. js调试系列: 初识控制台

    写在最开头:其实我以前就在考虑要不要写这个东西,因为这个东西确实不难,但是为什么会有这么多人问,他们问的不是怎么用控制台,而是不知道控制台能干嘛,他们也知道有 console.log 之类的东西,但他 ...

  5. 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  6. openlayer ol.js和ol-debug.js的使用 调试技巧

    二者实现的功能是一样的,有以下区别 : ol.js一般打包项目的时候使用, ol-debug.js编写代码调试的时候使用. 下边是用ol-debug.js编写代码调试的显示: 编写代码调试的技巧,所有 ...

  7. javascript在调试bug的奇淫技巧(Chrome, Firebug, Filddle 调试)

    Fiddler Fiddler调式使用知多少(一)深入研究 微信fiddle 微信fiddle Chrome Google Chrome 官方 Chrome - 基础 Chrome - 进阶 Chro ...

  8. Web程序员开发App系列 - 调试Android和IOS手机代码(补图)

    Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...

  9. Visual Studio调试之断点基础篇

    Visual Studio调试之断点基础篇 我曾经问过很多人,你一般是怎么调试你的程序的? F9, F5, F11, F…… 有很多书和文章都是介绍怎么使用Visual Studio编写WinForm ...

随机推荐

  1. 自动化部署-Jenkins+SVN+MSBuild

    这篇文章主要介绍下使用Jenkins实现自动化部署 下载 https://jenkins.io/download/ 安装 按步骤安装即可,下载的是windows版本,安装完成后,会看到这样一个正在运行 ...

  2. python的闭包函数

    在一个外函数中定义了一个内函数,内函数里运用了外函数的临时变量,并且外函数的返回值是内函数的引用.这样就构成了一个闭包. #闭包函数的实例# outer是外部函数 a和b都是外函数的临时变量def o ...

  3. arduino按钮使用的两个小实验

    一:按钮控制一个灯                                                                                            ...

  4. 机房ping监控 smokeping+prometheus+grafana

    一.前言 1.本监控方案主要由smokeping+promethues+grafana组成.smokeping主要数据采集,promethues作为数据存储,grafana数据展示 2.其实smoke ...

  5. HashMap相关总结

    1.HashMap:根据键值hashCode值存储数据,大多数情况下可以直接定位到它的值,但是遍历顺序不确定.所有哈希值相同的值存储到同一个链表中                         Ha ...

  6. Linux换源

    Linux换源 前言 最近学校的ipv6坏了,导致从deepin本身获取的源速度极慢,笔者实在忍无可忍,随后在同学指导下换了清华大学ipv4的源 步骤 sudo gedit /etc/apt/sour ...

  7. Ubuntu忘记MySQL密码重设方法

    ====================忘了mysql密码,从网上找到的解决方案记录在这里==================== 结束当前正在运行的mysql进程 # /etc/init.d/mys ...

  8. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 2. 变量

    大家在中学就已经学过变量的概念了.例如:我们令 x = 100,则可以推出 x*2 = 200 试试下面这段 Python 代码 import turtle turtle.shape("tu ...

  9. 5G的作业- 云计算

    作业命题:5G对于保险行业的影响,技术层面和业务模式层面 一.5G网络的特点: 5G网络主要有三大特点,极高的速率 enhanced mobile broadband (eMBB),极大的容量 Mas ...

  10. Trips CodeForces - 1037E(思维dfs)

    题意: 就是几个人去旅游,组队的条件是对于某个队员 队里至少有两个是他的朋友,每天早晨都会有一对新人成为朋友 解析: 用set标记互为朋友 a[i] b[i] 表示在第i天早晨 u和v成为朋友 先求最 ...