Ziv小威

你不知道的Console

Ziv小威 发表于2018-07-07 Javascript

img

相信很多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.groupcollapsedconsole.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 对我们的日常开发工作还是有一定的帮助的,无论你是写工具造轮子,还是想在产品的控制台上做文章,都是可以的。当然,如果你想实现更复杂的字符图案,则需要学习了解相关的图案算法了。

更多参考

Ziv小威 · Javascript

让美的事情发生

 
comments powered by Disqus