Chrome的控制台是前端人员常用的工具之一，但是大多数时候基本只用到了console.log，下面的一些方法能够帮你更快速灵活的查看数据。

输出数组

使用console.log输出数组时，会是以下这样

在处理复杂的数组的时候,查找不方便，尤其是在一些复杂的list结构的时候比如我们有数据如下：

var list = [

{

name: "poly",

sex: 1,

age: 12,

},

{

sex: 2,

age: 34,

phone: 13688,

}

];

在少量数据的时候，我们直接可以看出来第一个元素缺失了Phone，第二个元素缺失了name，但是在数组很长，比如有200条数据，元素内属性很多，比如每个元素有30条属性的时候，这样的查看就变得很麻烦Chrome提供了一个table方法，来解决此问题，我们可以输入console.table()会得到如下的结果

这在查看的时候变的十分的清晰

多参数输出

很多时候我们需要输出多个数据，比如输出一个对象中的某个属性和属性名，可能我们会用到如下的方式

var a={name:'lili',phone:'123413'};

console.log(a.name+":"+a.phone);

在很多属性的时候，这个方法显得有点low，其实console也支持多个参数的输入，上面的可以直接写成

var a={name:'lili',phone:'123413'};

console.log(a.name,a.phone);

将会输出lili 123413这将使我们的调试更轻松

不一样的色彩

在多人协作的时候，我们很多时候会发现其他人也在打印记录，尤其遇到新人的时候，你会发现太多的log记录，单一的log记录不仅看起来很不舒服，而且查找自己的记录也会变的很苦难，那么下面这个方法将解决此问题

var a="test";

console.log("%c"+a,"color:white;background:blue");

显示的结果如下

它可以支持任意的css样式

注意：%c是一个占位符，他代表了对字符所使用的样式，所以后面对应的参数，只能是字符，其他格式的暂不支持。如果你希望打印一个object或者一个list，需要先转成字符，然后再打印。

愚人节必备

请将如下代码加入到你的工程中，你的其它同事在使用console.log的时候，脸色会变的很精彩

var _log = console.log;

console.log = function() {

_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');

};