• home > webfront > ECMAS > javascript >

    Chrome的控制台:Console标签调试代码的函数分析

    Author:zhoulujun@live.cn Date:

    console调试代码,一般用的也就是console log( test )和console info( test )。但是console调试远不止这个两个属性。本篇不做一一讲解(可以瞅瞅下面的表格)。挑选几个个人觉得重要的 备注一下

    打开chrome,win系统按F12,mac系统按command+option+J就可以呼出控制台了,切换到Chrome的控制台Console标签就能看到 console信息

    console调试代码,一般用的也就是console.log('test')和console.info('test')。但是console调试远不止这个两个属性。本篇不做一一讲解(可以瞅瞅下面的表格)。挑选几个个人觉得重要的 备注一下

    代码实例用途
    console.log("这是平凡的字符串");打印字符串
    console.info("这是温柔的提示");打印提示消息
    console.warn("这是严肃的警告");打印警告消息
    console.error("这是错误消息");打印错误消息
    console.debug("这是调试信息");打印调试信息,console.log方法的别称
    console.log(console);打印对象
    console.assert(1 == 0);判断真假情况
    console.group('报数');  console.log("一!");  console.log("二!");  console.groupEnd();分组输出
    console.groupCollapsed();创建一个新的分组.随后输出到控制台上的内容都会被添加一个缩进,表示该内容属于当前分组,直到调用console.groupEnd() 之后,当前分组结束。
    var data = [{'姓名': 'zlt', '数量': 1}];    console.table(data);显示关联数组信息
    console.dir(document.body);将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,以树的结构进行输出
    var test = document.getElementById('test');   console.dirxml(test);查看页面中对应元素的 html/xml 内容
    console.log('%cMy name is zlt.', 'color: #fff; background: #000; font-size: 24px;');特殊的标示符%c,对输出的文字可以附加特殊的样式,background属性的url()中添加图片路径就可以实现图片的输出了
    $('table')返回与指定的CSS选择器相匹配的第一个元素,等同于document.querySelector();如果你使用的库,如jQuery使用$,那么这个功能将被覆盖,并且$将对应用该库的实现
    $$('table')返回与指定的CSS选择器相匹配的所有元素的数组,等同于document.querySelectorAll()
    $_引用最近的一个表达式,功能与按向上的方向键再回车一样
    $0 ~ $4最近选择过的5个DOM节点。$0会返回最近一次点选的DOM结点。以此类推,$1返回的是上上次点选的DOM节点。最多可以保存5个,如果不满5个,则返回undefined。
    $x('//*[@id="console"]/div[2]/table[2]/tbody/tr[4]')返回与指定的XPath相匹配的所有元素的数组
    var data = {name: 'zlt',num: 1};   keys(data);返回传入对象所有属性名组成的数据
    var data = {name: 'zlt',num: 1};   values(data);返回所有属性值组成的数组
    inspect(document.body)Elements面板跳到需要查看的对象上
    getEventListeners(document.getElementById  ("eventListeners")).click[0].listener查看某个DOM对象上的事件
    monitorEvents(document.body, "click")监控相关的事件,unmonitorEvents便是用来停止这一监控
    console.clear()清理函数
    clear()用 chrome 的 command line api 来清理控制台
    copy(document.body)在控制台获取到的内容复制到剪贴板
    document.designMode = "on"直接修改网页内容


    个人觉得比较实用的几个函数有 console.group console.time console.dir console.trace monitor

    monitor

    monitor(function) 接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。 而unmonitor(function)便是用来停止这一监听——debugger调试一个方法,当该方法调用时会暂停并且在源码中定位,效果和断点类似。undebug可以停止调试。。

    function sayHello(name) {
      console.info('hello,' + name);
    }
    monitor(sayHello);
    sayHello('zlt');
    unmonitor(sayHello);
    sayHello('zlttt');


    console.trace

    追踪函数的调用过程

    function test() {
      console.trace('追踪Test函数调用');
    }
    function a() {
      test();
    }
    console.log(a());


    console.time

    记录代码运行所花费的时间,评估某段代码或是某个函数的性能

    console.time('计算代码块A执行时间:');// 开始计时
    for (let i = 0; i < 10000; i++) { /* TODO*/ }
    console.timeEnd('计算代码块A执行时间:');// 开始结束计时


    console.profile

    评估某段代码或是某个函数的性能,结果显示在 Memory面板的profile中

    console.profile('分析码块A:');// 开始计时
    for (let i = 0; i < 10000; i++) { /* TODO*/ }
    console.profileEnd('分析码块A:');// 开始结束计时

    具体查看:

    Chrome DevTools: 在 Profile 性能分析中显示原生 JS 函数 https://zhuanlan.zhihu.com/p/25743570

    英文版:https://www.mattzeunert.com/2016/08/06/show-native-functions-in-js-profile.html

    console.group

    分组输出

    console.group('报数');
    console.log('一!');
    console.log('二!');
    console.groupEnd();


    console.dirxml

    查看页面中对应元素的 html/xml 内容

    var test = document.getElementById('test'); 
    console.dirxml(test);


    参考文章:

    https://zhaoluting.gitbooks.io/chrome/content/panel/console.html

    天天用控制台,那 Console 命令的各种用法你真的都已经了解了吗? https://toutiao.io/posts/fvogq8/preview





    转载本站文章《Chrome的控制台:Console标签调试代码的函数分析》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2015_0717_128.html