JavaScript小记—console的用法

JavaScript小记—console的用法

在工作过程中，console是我们最用到的打印日志的方法，但是除了console.log，他还有其他更多的妙用。

log info warn error

在控制台中，info和log的打印效果相同，因此用到的很少。而warn和error比较明显，可以第一眼看到。但是在编码过程中，有时候框架会报一些警告和错误也会导致难以分辨，因此还需要一种更清晰的展示方式更快的找到自己在控制台打印的东西。

占位符%c

使用占位符%c输出的文字会以你指定的样式显示在控制台中，包括字体格式，大小颜色，背景色，渐变等。甚至可以采用背景图片的方式来在控制台中打印图片。使用这种方式可以使我们更加快捷的找到要看的信息。注意占位符是百分号在前字母在后，写反了不生效。

当想要查看变量的值时可以用反引号显示

// 输出信息
console.log("%c ---log---", 'color: red; font-size: 16px; background-color: yellow;');
// 输出变量
var a = 10;
console.log(`%c ---${a}---`, 'color: red; font-size: 16px; background-color: yellow;');

还有其他的占位符，但是用处不是很大此处不做介绍。

console.table

有时候打印的数据多了以后，看数据都堆在一起，例如一个数组或一个对象里面有很多数据，想找一个数据找不到，就可以采用这种方式，将数据用表格的形式展现出来。

var obj = {
    id: 1,
    name: 'Jack',
    age: 18,
    sex: 'male'
 };
 var arr = ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'];
 console.table(obj);
 console.table(arr);

console.dir

他和log的区别是，他可以输出一个对象或一个DOM元素的所有方法，当我们只想看值时可以用log输出，当我们想使用上面的方法时可以采用dir来进行打印。