你不知道的console

標簽：

JavaScript

前言

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