前言

对于前端开发者，使用console.log() 次数绝对很多，但是大部分人认识的 console 对象还不是很全面，其实深入了解这些后，你会发现给开发过程带来很多便利，而且还很有趣。

先来看看别人的控制台。

天猫(还加入了字符画)

百度(这个大家都不陌生，最近还稍微有点改变)

再来看下我博客的

是不是感觉你之前用的console.log()弱爆了，别着急往下看。

重新认识 console

你好我是console，重新认识一下吧。

正在阅读这篇文章的你，F12打开你的控制台，切到Console输入console输出看看这个对象

是不是惊呆了，除了常用的 log 方法还有这么多方法。

console.log() 输出普通信息

console.info() 输出提示信息console.error() 输出错误信息console.warn() 输出警告信息

上面这些就不演示了。

console.dir()

显示对象的所有的属性和方法

var obj = {  str: 'youhun',  num: 1,  func: function(){    console.log('a')  }};console.dir(obj);

console.tabel()

传入对象/数组，以表格形式输出

var obj = {  foo: {    name: 'foo',    age: '33'  },  bar: {    name: 'bar',    age: '45'  }};var arr = [  ['foo', '33'],  ['bar', '45']];console.table(obj);console.table(arr);

console.time()

计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上

console.time('计时器');for (var i = 0; i < 1000; i++) {  for (var j = 0; j < 1000; j++) {}}console.timeEnd('计时器');

console.group() 和 console.groupCollapsed()

输出嵌套，就是分组，同样支持多层嵌套

console.group('第一层');  console.log('第一层里面');console.group('第二层');  console.log('第二层里面');console.groupEnd();console.groupEnd();

ps：console.group 默认是展开状态，console.groupCollapsed 默认是收起状态

console.trace()

用来追踪函数的调用轨迹。大型项目中，这尤为重要。

function add(a, b) {    console.trace("Add function");    return a + b;}function add3(a, b) {    return add2(a, b);}function add2(a, b) {    return add1(a, b);}function add1(a, b) {    return add(a, b);}var x = add3(1, 1);

console.count()

输出执行次数

(function() {  for (var i = 0; i < 5; i++) {    console.count('count');  }})();

console.assert()

条件输出，接收两个参数。第一个参数为真时，不输出内容，否则显示，并抛出来一个异常。

console.assert(1 == 1, '你看不到我');console.assert(1 == 2, '你看到我了');

console.log 的高级玩法

这个为什么单独拿出来说，正是因为这个玩法多样。会了，你可以像文章开头举例那些，做出自己喜欢的console.log

占位符

• %s 格式化成字符串输出
• %d or %i 格式化成整数输出
• %f 格式化成浮点数输出
• %o 转化成展开的DOM元素输出
• %O 转化成JavaScript对象输出
• %c 字符串增加样式输出

var arr = ["小明", "小红"];var obj = {name:'youhun'}console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415);console.log('%o', obj);console.log('%O', obj);

再来试试 %c 来点样式

console.log('%c我的背景是红色', 'color: #fff; background: red; font-size: 24px;'); console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");console.log('%cYouhun', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

参考链接