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;');
