您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版简析chrome调节和测验技艺,C

1010cc时时彩经典版简析chrome调节和测验技艺,C

发布时间:2019-11-10 19:08编辑:1010cc时时彩客户端浏览(127)

    Chrome控制台 如何调试Javascript

    2015/01/12 · JavaScript · Chrome

    原文出处: ctriphire   

    上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方)

    1、先说一下源码定位

    大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

    1010cc时时彩经典版 1

    我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

    1010cc时时彩经典版 2

    直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

    1010cc时时彩经典版 3

    大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

    1010cc时时彩经典版 4

    这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

    知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的定义处,所以没法在此设置断点。

    1010cc时时彩经典版 5

    设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

    我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

     

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

    其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

    当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

    用图说话(哈哈)

    1010cc时时彩经典版 6

     

    刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

    下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

    右击“提交评论”–>审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

    JavaScript

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

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

    如下图所示:

    1010cc时时彩经典版 7

    按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

    最后介绍一下一个神器,很好用的debugger

    如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

    赞 1 收藏 评论

    1010cc时时彩经典版 8

     

    上几篇文章已经为大家介绍了js调试系列的一些基础知识,这次乱码兄弟为大家带来了js断点与动态调试方法,需要的朋友可以参考下

    写在前面
    本文包括浏览器调试,不包括web移动端调试。
    本文调试均在chrome浏览器进行

    作为一名前端开发者,打交道最多的可能是和浏览器。市面上各种浏览器多不胜数,主流的有Chrome,Firefox,Safari,IE,Opera,非主流的如360,遨游,QQ浏览器,搜狗浏览器,据说淘宝最近也要出浏览器了。不过个人最喜欢的还是Chrome,因为它的简洁和快速,还有功能的强大。FF什么的我觉得它已经慢得跟不上时代了:-D,这是个人意见,喜欢FF的朋友尽管吐槽。虽然IE和Firebug的开发工具都用过,但始终觉得不如Chrome顺手。下面就详细介绍一下Chrome的开发人员工具。

    阅读目录

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

    alert

    这个不用多说了,不言自明

    Chrome一共有8个功能子集。如下图:

    • 写在前面
    • 谷歌控制台Elements面板
    • 查看元素上绑定的事情
    • 样式操作
    • 总况
    • console.log
    • console.info
    • console.error
    • console.warn
    • console.debug
    • console.dirxml
    • console.group和console.groupEnd
    • console.assert
    • console.count
    • console.dir
    • console.time和console.timeEnd
    • console.profile和console.profileEnd
    • console.timeLine和console.timeLineEnd
    • console.trace
    • 方向键盘的上下键
    • $_
    • Chrome 控制台中原生支持类jQuery的选择器
    • copy
    • keys和values
    • console.table
    • monitor & unmonitor
    • Console.log样式
    • 如果您觉得本篇博文对您有所收获,觉得小女子还算用心,请点击右下角的 [推荐],谢谢!
    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)) 
      } 
     }); 
    }
    

    console

    1010cc时时彩经典版 9

    回到顶部

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

    基本输出

    想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:

    console.log("打印字符串");//在控制台打印自定义字符串
    console.error("我是个错误");//在控制台打印自定义错误信息
    console.info("我是个信息");//在控制台打印自定义信息
    console.warn("我是个警告");//在控制台打印自定义警告信息
    console.debug("我是个调试");//在控制台打印自定义调试信息
    console.clear();//清空控制台(这个下方截图中没有)
    

    1010cc时时彩经典版 10

    console

    注意上面输出的error和throw出的error不一样,前者只是输出错误信息,无法捕获,不会冒泡,更不会中止程序运行。

     

    写在前面

    大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log

    先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松的打开控制台

    1010cc时时彩经典版 11

    大家可以看到控制台里面有一首诗还有其它信息,如果想清空控制台,可以点击左上角那个1010cc时时彩经典版 12来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示

    1010cc时时彩经典版 13

    现在假设一个场景,如果一个数组里面有成百上千的元素,但是你想知道每个元素具体的值,这时候想想如果你用alert那将是多惨的一件事情,因为alert阻断线程运行,你不点击alert框的确定按钮下一个alert就不会出现。

    下面我们用console.log来替换,感受一下它的魅力。

    1010cc时时彩经典版 14

    在console面板中输入命令时,可以使用Shift Enter换行,Tab键来自动补全

    看了上面这张图,是不是认识到log的强大之处了,下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。

    1010cc时时彩经典版 15

    1、先说一下源码定位

    大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

    1010cc时时彩经典版 16

    我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

    1010cc时时彩经典版 17

    直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

    1010cc时时彩经典版 18

    大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

    1010cc时时彩经典版 19

    这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

    知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的定义处,所以没法在此设置断点。

    1010cc时时彩经典版 20

    设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

    我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

     

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

    其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

    当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

    用图说话(哈哈)

    1010cc时时彩经典版 21

     

    刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

    下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

    右击“提交评论”-->审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

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

    如下图所示:

    1010cc时时彩经典版 22

    按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

    最后介绍一下一个神器,很好用的debugger

    如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

    回到顶部

    简单读过代码后,可以大致知道,这个函数有 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" 其他状态直接提示服务器返回的错误信息。
    这就是大致的流程,因为这个函数简单,所以基本上一眼就看出来了。

    格式化输出

    除此以外,console还支持自定义样式和类似c语言的printf形式

    console.log("%s年",2016);//%s表示字符串
    console.log("%d年%d月",2016,11);//%d表示整数
    console.log("%f",3.1415926);//%f小数
    console.log("%o",console);//%o表示对象
    
    console.log("%c自定义样式","font-size:30px;color:#00f");
    console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");
    

    1010cc时时彩经典版 23

    formatted output

    1、Elements:

    谷歌控制台Elements面板

    要想打开谷歌控制台,有两种方式

    1. ctrl shift i
    2. f12

    大家知道Elements面板最大的功能就是操作属性和修改html。这里我再说一些大家可能不太熟悉的特性,

    • 拖拽节点, 调整顺序
    • 拖拽节点到编辑器
    • ctrl z 撤销修改

    这些功能是我觉得最有意思的,你们可以试试哦。

    下面来具体说说几个复杂点的功能

    回到顶部

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

    DOM输出

    下面几个比较简单的,就不举例子了,简单说一下:

    var ul = document.getElementsByTagName("ul");
    console.dirxml(ul); //树形输出table节点,即<table>和它的innerHTML,由于document.getElementsByTagName是动态的,所以这个得到的结果肯定是动态的
    

    1010cc时时彩经典版 24

    DOM output

     

    查看元素上绑定的事情

    • 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
    • Selected Node Only 只会列出当前节点上绑定的事件
    • 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

     

    • handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
    • isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
    • useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行

    1010cc时时彩经典版 25

    回到顶部

    1010cc时时彩经典版 26
    so easy,我们就定位到了源码。
    接下来我们点下92那个数字,进行下断点操作。
    为什么不是在91行下断点呢?
    因为91行是函数声明部分,没法下断点,我们在函数要执行的代码处下断点才行。
    1010cc时时彩经典版 27
    看到 91 行的行号变成蓝色了,表示这个地方已经下了断点了。同时,我们可以在右侧 Breakpoints 一栏里看到已下的断点。
    Breakpoints 这个一栏是管理所有断点的,可以方便的跳转到对应断点的位置出,以后常常会用到哦。

    对象输出

    var o = {
      name:"Lily",
      age: 18
    };
    console.dir(obj);//显示对象自有属性和方法
    

    1010cc时时彩经典版 28

    object output

    对于多个对象的集合,你可以这样,输出更清晰:

    var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
    console.log(stu);
    console.table(stu);
    

    1010cc时时彩经典版 29

    output in table

    这个部分主要是显示实时的DOM树。在页面中右键单击“ 审查元素 ”,就会出现Elements的面板。

    样式操作

    可以通过 ctrl z 取消

    1010cc时时彩经典版 30

    回到顶部

    现在下完断点了,我们回头点下 推荐。。(虽然感觉我在骗推荐,不过我真心没这么想,当初是随便找了个按钮当练习的。)
    当你点 推荐 按钮的时候,神奇的事情发生了,并没有运行推荐功能,而是跳到了控制台 Sources 面板里我们刚刚下的那个断点处。
    1010cc时时彩经典版 31
    现在,你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。
    Scope Variables栏目会显示当前作用域以及他的父级作用域,以及闭包。
    是不是超方便。。(我初学闭包的时候,Scope Variables帮了我不少呢。)

    成组输出

    //建立一个参数组
    console.group("start"); //引号里是组名,自己起
    console.log("sub1");
    console.log("sub1");
    console.log("sub1");
    console.groupEnd("end");
    

    1010cc时时彩经典版 32

    output in group

    1010cc时时彩经典版 33

    总况

    目前控制台方法和属性有:

    ["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
    

    下面我们来一一介绍一下各个方法主要的用途。

    一般情况下我们用来输入信息的方法主要是用到如下四个

    回到顶部

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

    函数计数和跟踪

    function fib(n){ //输出前n个斐波那契数列值
      if(n == 0) return;
      console.count("调用次数");//放在函数里,每当这句代码运行输出所在函数执行次数
      console.trace();//显示函数调用轨迹(访问调用栈)
      var a = arguments[1] || 1;
      var b = arguments[2] || 1;
      console.log("fib="   a);
      [a, b] = [b, a   b];
      fib(--n, a, b);
    }
    fib(6);
    

    1010cc时时彩经典版 35

    trace of fun

    <small>注:Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。</small>

    左边就展示的是DOM树,在一个DOM节点上点击右键就会出现一个菜单,一共分为4部分,第一部分是添加和编辑节点的属性,例如class等。第二部分是编辑节点,点击Edit as HTML,就可以像在编辑器中一样编写代码,Copy as HTML就是复制代码了,Delete node是整个删除节点。第三部分是添加DOM的断点。如果我们添勾选了任何一个,就会在右边栏的第五部分DOM breakpoints出现,这里对应的是JS的对DOM的操作,如果出现对应的事件(节点子树改变、节点属性改变、节点被移除),那么JS就会在相应的事件监听函数那里挂起,这个在后面JS设置断点再讲解关于断点的东西。最后一部分是文字换行,貌似用处不大。

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版简析chrome调节和测验技艺,C

    关键词: