你不知道的console

前言

对于前端开发者，使用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;');

参考链接

1. https://developer.mozilla.org/en-US/docs/Web/API/console
2. http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html