zoukankan      html  css  js  c++  java
  • 你所不知道的 Console

    1.凡人视角

    打印字符串

    代码:

    console.log("I am a 凡人");

    打印提示消息

    代码:

    console.info("Yes, you arm a 凡人");

    打印警告消息

    代码:

    console.warn("凡人你居然敢窥视我");

    打印错误消息

    代码:

    console.error("天兵天将,把这个凡人给我打入地狱");

    打印调试信息

    代码:

    console.debug("我就是传说中的debug");

    2.上帝视角

    查看所有方法

    console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。

    代码:

    console.log(console);

    输出:

    Object {

        assert: ...,

        clear: ...,

        count: ...,

        debug: ...,

        dir: ...,

        dirxml: ...,

        error: ...,

        group: ...,

        groupCollapsed: ...,

        groupEnd: ...,

        info: ...,

        log: ...,

        markTimeline: ...,

        profile: ...,

        profileEnd: ...,

        table: ...,

        time: ...,

        timeEnd: ...,

        timeStamp: ...,

        timeline: ...,

        timelineEnd: ...,

        trace: ...,

        warn: ...

    }

    啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。

    但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。

    清理控制台

    如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数 console.clear() 。

    console.clear()

    当然我们也可以用 chrome 的 command line api 来清理控制台。

    clear()

    又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。

    分组

    当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。

    代码:

    console.group('凡人');

    console.log("手");

    console.log("脚");

    console.groupEnd();

    console.group('神');

    console.log("法力无边");

    console.log("腾云架雾");

    console.groupEnd();

    输出:

    如果想要输出为折叠,我们可以使用 console.groupCollapsed ,用法和 console.group 类似。

    查看对象信息

    有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

    代码:

    var person = {

        head: 1,

        hand: 2,

        leg: 2

    };

    console.log(person);

    呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。

    var data = [

        {

            '姓名': '幼儿园', 

            '性别': '女'

        },

        {

            '姓名': '李狗嗨',

            '数量': 1

        }

    ];

    console.table(data);

    输出:

    但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

    console.dir(clear);

    什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

    html代码:

    <div id='person'>

        <p>I am a 凡人</p>

    </div>

    javascirpt代码:

    var person = document.getElementById('person');

    console.dirxml(person);

    性能测试

    雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。

    console.time("神机妙算");

    (function () {

        for(var i = 0; i < 10; i++) {

            var sum = (function () {

                var flog = 0;

                for(var i = 0; i < 10; i++) {

                    flog+=i;

                }

            })();

        }

    })();

    console.timeEnd("神机妙算");

    啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~

    console.profile("神机妙算");

    (function () {

        for(var i = 0; i < 10; i++) {

            var sum = (function () {

                var flog = 0;

                for(var i = 0; i < 10; i++) {

                    flog+=i;

                }

            })();

        }

    })();

    console.profileEnd("神机妙算");

    输出会显示在 profile

    什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。

    代码:

    function add(num) {

        if (0 < num) {

            console.trace("现在num的值为", num);

            return num + add(num - 1);

        } else {

            return 0;

        }

    }

    var a =3;

    add(3);

    输出:

    判断真假

    平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。

    console.assert(1 == 1);

    console.assert(1 == 0);

    console.assert(!(1 == 0));

    统计次数

    有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。

    function hi(name) {

        console.count(name);

        return "hi " + name;

    }

    for(var i = 0; i < 10; i++) {

        if(i < 4) {

            hi("person");

        } else {

            hi("god");

        }

    }

    总结

    console 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。

  • 相关阅读:
    JavaScript 数组去重
    Javascript数组 reduce() 方法
    Vue事件总线(EventBus)
    前端多媒体-音频
    前端多媒体-视频
    VUE3.0 总结
    el-select地区区号选择
    vue中点击获取相应元素
    Markdown 语法
    Codeforces Round #295 (Div. 2) B. Two Buttons 520B
  • 原文地址:https://www.cnblogs.com/reaf/p/6009678.html
Copyright © 2011-2022 走看看