【JS调试】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()

固然咱们也能够用 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 来调试代码，使得咱们测试更加便利。