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

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 事件源码定位问题》,有详细分析哦。

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

    js调试系列: 断点与动态调试[基础篇],布布扣,bubuko.com

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

    上一篇:php里的declare用法


    下一篇:php结合linux 执行通道关闭重启