深入了解前端控制台Console对象

今天在百度知道打开开发者工具可以看到一则百度的职位邀请通知:

访问http://zhidao.baidu.com/misc/more/joinus就可以看到详细的招聘信息, 不知道看见这个输出内容的前端们是不是和我一样有一个疑问: 那张图片是怎么出来的?

我们可以在网页中找到相关代码:

var cons = console;  
if (cons) {  
    cons.log("%c\n       ", "font-size:41px;background:url('http://cdn.iknow.bdimg.com/static/common/pkg/module_zed9cd9fd.png') no-repeat -135px -1px");
    cons.log('想和我们共同打造世界最大中文互动问答平台吗?\n想让自己的成就在亿万用户面前展现吗?想让世界看得你的光芒吗?\n加入我们,在这里不仅是工作,投入你的时间和热情,滴滴汗水终会汇聚成不平凡的成果。\n期待你的加盟。http://zhidao.baidu.com/misc/more/joinus');
    cons.log("请在邮件中注明%c来自:console", "color:red;font-weight:bold;");
}

可以发现, 我们在console.log输出内容时, 使用%c关键字可以进行字符串替换, 而这个替换的实际效果是为输出文本添加样式.

我不得不重新审视自己对Console对象的了解, 于是开始搜集资料进行整理并最终撰写了这篇文章.

Console是什么?

Console是一个JavaScript解释器的内置对象, 用于访问调试控制台, 在不同的浏览器里效果可能不同.

我们最常用的console.log就是Console对象的一个静态方法, 它的作用是将内容输出到控制台上.

现在, 我们来深入了解一下Console都提供了什么功能.

console.log(object[, object, …])

console.log用来在控制台上输出信息, 所需的参数是需要输出的对象, 输出的对象会以空格分隔开.

如果第一个参数使用了字符串替换模式, 则之后的参数将作为替换字符串, 这类似于printf占位符格式化输出. console可用的字符串模式请参照下表.

模式类型
%s字符串
%d, %i整型数值
%f浮点数值
%o对象超链接
%c格式化样式
#### console.debug(object[, object, …])

功能与console.log类似, 输出将会包含对象超链接, 多数情况下与console.log输出的效果一致.

console.info(object[, object, …])

功能与console.debug类似, 输出会伴随一个”信息”图标, 在Firefox中有效果.

console.warn(object[, object, …])

功能与console.debug类似, 输出会伴随一个”警告”图标.

console.error(object[, object, …])

功能与console.debug类似, 输出会伴随一个”错误”图标, 在Webkit下的效果与未捕捉到异常类似.

console.assert(expression[, object, …])

断言函数, 如果expression的结果为假, 将抛出一个异常并将其余参数作为异常描述输出.

console.clear()

清空控制台内容.

console.dir(object)

以列表形式输出对象, 效果类似于查看DOM.

console.dirxml(node)

以审查元素的形式输出HTML/XML元素.

console.trace()

追踪当前函数, 输出函数的调用痕迹.

console.group(object[, object, …])

对控制台输出分组, 调用该方法后接下来的输出将会产生一个可折叠缩进块.

console.groupCollapsed(object[, object, …])

功能与console.group类似, 区别在于缩进块默认是折叠的, 这会导致接下来的输出不可见, 需要手动打开折叠块.

console.groupEnd()

关闭console.group或console.groupCollapsed打开的缩进块.

console.time(name)

以参数name作为计时器的名称, 新建一个计时器.

console.timeEnd(name)

结束以参数name命名的计时器, 输出console.time调用后经过的时间.

console.timeStamp(name)

在HTTP流量面板上增加一个时间戳.

console.profile([title])

开启一个JavaScript性能分析器, 可选参数是分析器报告的标头.

console.profileEnd()

关闭JavaScript性能分析器, 输出报告.

console.count([title])

从1开始输出计数, 参数title用于区别不同的计数器.

console.table(data[, columns])

以表格形式输出数据.

比如:

console.table([{'name':'BlackGlory','site':'www.blackglory.me'},{'name':'Google','site':'www.google.com'}],['name']);