zoukankan      html  css  js  c++  java
  • 【前端调试】console

    Console中常用的方法:

    (1)console.log()/console.info()/console.warn()/console.error()/console.debug() 可以打印不同类型的值。

    console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o, %O)四种。其中,%o占位符,可以用来查看一个对象内部情况。

    注:console.log('%o', document.body)等同于按照console.log(document.body)显示,如果是使用'%O'则有所不同,它等同于console.dir(document.body). 对于普通的对象则没有差别。

      console.log()取代alert(),是因为alert阻断线程运行。

    (2)console.table()

    可以用于打印对象或数组,在控制器中会以表格的形式显示,属性值都是整齐排列的。
    不同于console.log()的树视图,不用每次都手动折叠查看信息。

    如果只想显示某一属性,可以将这个属性作为第二个参数传入即可:
    console.table(obj, 'name')
    显示多个属性,则传入属性的数组,
    console.table(obj, ['name', 'age']);

    (3)console.group()/console.groupEnd()

    作用:如果要输出的信息太多,可以分组显示。

    console.group('第一组');
        console.log('一组一条');
        console.log('一组一条');
    console.groupEnd();
    
    console.group('第二组');
        console.log('二组一条');
        console.log('二组一条');
    console.groupEnd();

     (4)console.assert()

    作用:对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台。

    var year = 2018
    console.assert(year == 2017, '当前者为false时输出错误');

     (5)console.count()

    作用:当你想统计代码被执行的次数可以使用,这个方法非常实用!!!

    function exec() {
        console.count('代码被执行的次数:');
    } 

    其他不常使用的方法:

    (1)console.clear()

    作用:在控制台输入来实现清空控制台信息。

    (2)console.dirxml()

    作用:显示网页的某个节点(node)所包含的html/xml代码
    比如,先获取一个表格,再显示该节点包含的代码。
    var table = document.getElementById('table1');
    console.dirxml(table);
    或者直接使用id显示:
    console.dirxml(table1);

    (3)console.dir()

    作用:显示一个对象的所有属性和方法。对DOM结构以对象的方式输出。
    console.dir(document.body);

    它与console.log()等方法的区别在于,console.log(document.body)只是输出html文档,而console.dir(document.body)则是转换为对象显示。

    (4)console.time()/console.timeEnd()

    作用:计时

    // 计算实例化100000个对象所需的时间 Init Array: 57.504ms (时间每次都会不一致)
    console.time('Init Array');    // lable : 'Init Array'
    var array = new Array(100000);
    for(var i=0; i<array.length; i++){
        array[i] = new Object();
    }
    console.timeEnd('Init Array');
    // 传统的时间差计时:59
    var start = new Date().getTime();
    var array = new Array(100000);
    for(var i=0; i<array.length; i++){
        array[i] = new Object();
    }
    time = new Date().getTime() - start;
    console.log(time)

     (5)console.profile()/console.profileEnd()

    作用:查看性能信息,分析程序各个部分运行的时间,找出瓶颈。配合一起使用来查看CPU使用相关信息,在Profiles面板里面查看。

    console.profile('Init Array');
    var array = new Array(100000);
    for(var i=0; i<array.length; i++){
        array[i] = new Object();
    }
    console.profileEnd('Init Array');

       [ 这个函数的使用方法需要继续深入。]

    其结果可以存储,一般默认后缀为.cpuprofile,打开是JSON数据。也可以在Profiles中load进来。

    (6)console.trace

    作用:堆栈跟踪相关的调试,用来跟踪函数的调用轨迹。

    比如我想知道某个函数的执行轨迹,可以再其中加入console.trace()方法。

    function add(num1, num2) {console.trace(); return num1 + num2;}
    function add3(num1, num2) {return add2(num1, num2);}
    function add2(num1, num2) {return add1(num1, num2);}
    function add1(num1, num2) {return add(num1, num2);}
    var a = add3(1, 10);

       从上到下,依次显示add()的调用轨迹:add() <-- add1() <-- add2() <-- add3() <-- <匿名>

    add() demo.js:6
    add1() demo.js:16
    add2() demo.js:13
    add3() demo.js:10
    <匿名> demo.js:19

     (7) console.timeStamp(label)

    Log a time stamp with the given label. May be logged to the console or a timeline.

    console所有的函数:

     

    Refer:

    Chrome 控制台console的用法 : http://www.open-open.com/lib/view/open1421131601390.html

    The JavaScript console API : http://www.2ality.com/2013/10/console-api.html

    Chrome console : http://www.cnblogs.com/liyunhua/p/4529079.html

  • 相关阅读:
    C#中的扩展方法
    对象的序列化存入数据库,与反序列化
    PowerDesigner15:EAM(Enterprise Architecture Model)企业架构模组
    WPF优化:加速启动时间
    LINQ优化:将GroupBy换做Distinct
    WPF:CheckBox竖向的滑块效果
    微軟提議﹕c#編程四個注意
    Remoting:于.net框架下的序列化機制
    c#編寫聖誕樹算法﹐及相關問題。
    72
  • 原文地址:https://www.cnblogs.com/shih/p/6272430.html
Copyright © 2011-2022 走看看