你不知道的 Console

相信很多 Web 开发者跟我一样有个习惯，经常会不自觉的打开感兴趣网站的控制台（Console)。很多公司会在控制台中打印一些招聘或者安全警告的信息。作为一位开发者，当然更多的关心的是这些效果是如何实现的。今天我们不妨来重写认识下 Console 这个 API 对象。

简介

Javascript console是被提供用来访问浏览器Debug控制台的一个全局对象，一般我们可以直接通过console或者 window.console 的方式访问该对象。通常我们会利用该对象 debug 调试，当然你也可以跟其他公司一样，在上面发招聘信息。

其实除去我们平时常用的console.log、console.error、console.warn、console.info 方法外，其实console还有很多非常有用的 API。当然，事先已经知道的同学当我没说。先看下列这张表：

方法	用途
console.assert()	判断第一个参数是否为真，false 的话抛出异常并且在控制台输出相应信息。
console.clear()	清空控制台
console.count()	以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数。
console.debug()	console.log 方法的别称，使用方法可以参考 console.log()
console.dir()	打印一条以三角形符号开头的语句，可以点击三角展开查看对象的属性。
console.dirxml()	如果可以，打印 XML/HTML 元素表示的指定对象，或者 JavaScript 对象视图。
console.error()	打印一条错误信息，使用方法可以参考string substitution。
console.group()	打印树状结构，配合 groupcollapsed 以及 groupEnd 方法;
console.groupcollapsed()	创建一个新的内联 group。使用方法和 group 相同，不同的是 groupcollapsed 打印出来的内容默认是折叠的。
console.groupEnd()	结束当前 Tree
console.info()	打印以感叹号字符开始的信息，使用方法和 log 相同
console.log()	打印字符串，使用方法比较类似 c 的 printf 格式输出，可参考 string substitution 。
console.profile()	可以以第一个参数为标识，开始 javascript 执行过程的数据收集。和 chrome 控制台选项开 Profiles 比较类似，具体可参考 chrome profiles
console.profileEnd()	配合 profile 方法，作为数据收集的结束。
console.table()	将数据打印成表格。console.table [en-US]
console.time()	计时器，接受一个参数作为标识。
console.timeEnd()	接受一个参数作为标识，结束特定的计时器。
console.timeStamp()	添加一个标记到浏览器的 Timeline 或 Waterfall 工具.
console.trace()	打印stack trace.
console.warn()	打印一个警告信息，使用方法可以参考 string substitution。

来自MDN

console的 API 非常多, 当然，我们平常只会用到那么简单的几个，这里我主要挑几个特别和有用的 API 来介绍。

console.log

console.log 可能是其中我们用到最多的 API 了，通常我们会用来打印调试信息，当然我们用的都比较简单，其实console.log 有一些很方便和特别的用法。

使用占位符

通过一些占位符对我们的输出进行控制，可以轻易的丰富我们的输出结果，例如添加各种样式，结果组合等等。

占位符	输出
%s	输出字符串
%d 或者%i	输出数值或者整型
%o 或者%O	输出对象
%f	输出浮点值
%c	使用 CSS 样式输出

var a = 'a', b = 'b', c = 222;
console.log('String %s, String %s, Number %d ', a, b,c)

添加样式

// console.log
var text = '使用CSS样式'
console.log(
    "%c"+text,"font-family: Cabin, Helvetica, Arial, sans-serif;
    text-align: left;font-size:32px;color:#B21212;"
);

结果：

console style

console.table

console.table非常适合打印那种需要格式化输出以便于查看的JSON对象，例如当我们打印数组对象的时候，它会自动转换成表格，查看非常直观。

    var tableData = [{
        name: 't1',
        age: 25,
    },{
        name: 't2',
        age: 25,
    }]
    // console.log(tableData);
    console.table(tableData);

结果：

console-table

console.group

console.group 允许你将多个console.log 进行组合，以便于我们组织复杂的输出结果。使用console.group，通常会结合console.groupcollapsed 与 console.groupEnd使用。

// console.group
console.group('action', 'A');

console.log('%c prev state', "color: #dddddd", '\n', {
    name: 'a'
});
console.log('%c next state', "color: #dddddd", '\n',  {
    name: 'b'
});

console.groupCollapsed();
console.log('我是group折叠内容');
console.groupEnd();
console.groupEnd();

结果：

console group

console.assert

console.assert为断言输出。第一个参数的表达式值为false时，则打印输出后面参数的值，否则为 true，则无输出并继续执行程序。例如：

function notEqual(a, b) {
    console.assert(a === b, {
        msg: 'a is not equal b',
        a: a,
        b: b
    });
}

// console.assert
notEqual({a: 1}, {a: 2});

结果：

console assert

结语

以上我只是简单的介绍了下可能会常用的几个 API, 这几个 API 对我们的日常开发工作还是有一定的帮助的，无论你是写工具造轮子，还是想在产品的控制台上做文章，都是可以的。当然，如果你想实现更复杂的字符图案，则需要学习了解相关的图案算法了。

简介

console.log

console.table

console.group

console.assert

结语

更多参考