前端笔记 Front-end Dev Engineer

Console详解

2016-10-23
JavaScript

console作为代替alert的调试利器，相信很多人都在用，但是其实你使用的只是冰山一角。

常规用法

  • 打印字符串
console.log('I am 程序猿')
  • 打印提示消息
console.info('Yes,you are 程序猿')
  • 打印警告消息
console.warn('码农武工队接近中')
  • 打印错误信息
console.error('XX年XX月，某猿猝死')
  • 打印调试信息
console.debug('没错，我就是永生的臭虫')

console中的秘密

你以为console就以上几种用法？那就大错特错了

查看所有的方法

console.log(console)

在chrome中输出

object{
    assert:assert()
    clear:clear()
    count:count()
    debug:debug()
    dir:dir()
    dirxml:dirxml()
    error:error()
    group:group()
    groupCollapsed:groupCollapsed()
    groupEnd:groupEnd()
    info:info()
    log:log()
    markTimeline:markTimeline()
    memory:(...)
    get memory:()
    set memory:()
    profile:profile()
    profileEnd:profileEnd()
    table:table()
    time:time()
    timeEnd:timeEnd()
    timeStamp:timeStamp()
    timeline:timeline()
    timelineEnd:timelineEnd()
    trace:trace()
    warn:warn() 
}

注：以上特性并非每个浏览器都支持，所以生产环境中不要使用，但是在开发环境中可以尽情使用^_^

判断真假

我们可以使用 console.assert 来判断当前值的真假情况，该方法会在条件为错误时，返回一个 console.error 的输出。

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

清理控制台

用惯bash或者cmd一类的命令行的人，都喜欢用clear命令清理屏幕，浏览器控制台一样提供了一个清理函数 console.clear() 。

console.clear()

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

clear()

又或者可以使用按键Mac上 cmd + k ，Win ctrl + l（chrome浏览器）。

统计次数

打代码时我们偶尔需要统计函数或者被调用次数，通常使用变量 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.dir函数

function cat(name, age, score){
    this.name = name;
    this.age = age;
    this.score = score;
}
var c = new cat("miao", 2, [6,8,7]);
console.dir(c);

注：在chrome中表现形式与console.log不明显，在firefox中很明显

显示DOM信息

我们可以用 console.dirxml 来查看页面中某个节点中的html代码。

html代码：

<div id='person'>
    <p>I am a 凡人</p>
</div>

javascirpt代码：

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

注：现代浏览器中的log其实实现了这个方法。

分组

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

代码：

console.group('电脑');
console.log("鼠标");
console.log("键盘");
console.groupEnd();

console.group('前端');
console.log("HTML");
console.log("CSS");
console.log("JavaScript");
console.groupEnd();

性能测试

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.table 可以帮助我们清楚的显示关联数组信息。

代码：

var person = {
    head: 1,
    hand: 2,
    leg: 2
};

var data = [
    {
        '姓名': '幼儿园', 
        '性别': '女'
    },
    {
        '姓名': '李狗嗨',
        '数量': 1
    }
];
console.table(data);

计时器

我们需要对代码计时可以使用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.trace可以知道运行时的结果栈

代码：

function add(num) {
    if (0 < num) {
        console.trace("现在num的值为", num);
        return num + add(num - 1);
    } else {
        return 0;
    }
}

var a =3;
add(3);

总结

我们可以在开发环境中使用 console 来调试代码，提高开发效率。

日志

2016-10-23 创建

评论

Content