干货分享---console的灵活使用

一、前言

说到调试语句，比较初级前端程序员通常会不约而同的张口就来：console.log 呗。哐哐哐，往里放就van似儿了。

其实 console 本身除了基本 log 方法之外还有很多其他方法。

针对这些方法，我整理并搬运了一些实用技巧。本篇适合初学前端的同学阅读。

二、你以为简单的 console.log 其实并没有这么简单

标题有点长，哈哈。意思就是对待 console.log 我们也可以不那么简单粗暴。来看下面的。

1.占位符打印参数

console.log('I like %s but I do not like %s.', '', '');

占位符有效，效果如下：

常见的占位符 %o 接受对象，%s 接受字符串，%d 表示小数或整数。

2.筛选出自己的调试语句

通常在开发过程中，很少碰到合作伙伴制造大量console的情况。但如果一旦发生，将会很可怕。

假设代码中总共有如下调试语句

console.log('Peter', 'console picker')
console.log('console picker')
console.log('console picker')
console.log('console picker')
console.log('console picker')
console.log('console picker')
console.log('Mary', 'console picker')

执行如下

还可以使用控制台的过滤器进一步筛选

3.让console带上样式（不常用）

console.log('I am %cyellow', 'color: #333; background-color: yellow;padding: 2px 5px; border-radius: 2px');

效果如下

三、console.dir()打印详细Dom结构

对比下就知道它好在哪了~

let element = document.getElementById('root');
console.log('log ->')
console.log(element)
console.log('dir ->')
console.dir(element)

结果如下

很显然 dir 给我们的数据才是我们想要的Dom结构~

四、console.table()打印表格数据

假设我们有个表单数组如下

var tableData = [
	{
		"id":1,
		"name":"peter",
		"gender":"male"
	},
	{
		"id":2,
		"name":"hanmeimei",
		"gender":"female"
	},
	{
		"id":3,
		"name":"lilei",
		"gender":"female"
	}
]

使用 console.table(tableData)

这个可以有！

五、console.count()统计语句被执行的次数

这个方法可以理解为一个计数器
现在我有这样一段代码

for(let i = 0; i < 10000; i++) {
	if(i % 2) {
		console.count('odds');
	}
	if(!(i % 5)) {
		console.count('multiplesOfFive');
	}
	if(i % 7) {
		console.count('prime');
	}
}

打印结果为

multiplesOfFive: 1
odds: 1
prime: 1
prime: 2
odds: 2
prime: 3
prime: 4
odds: 3
multiplesOfFive: 2
prime: 5
...

还有一个相关的 console.countReset()，可以使用它重置计数器。

计数器使用的场景不多，但是一旦使用到，这个方法就很方便。

六、console.time和console.timeEnd

随着WEB应用越来越重要，JavaScript的执行性能也日益受到重视，WEB开发人员知道一些性能测试的方法是必须的。

测试代码如下

const testFun = number => {
	console.time('testFun'); // testFun
	// something slow or complex with the numbers.
	// Factorials, or whatever.
	console.timeEnd('testFun');// testFunconsole.time
}
console.time(); //
for (i = 0; i < 10; ++i) {
	testFun(i);
}
console.timeEnd(); // defaultfor

执行结果

从结果可知，单次testFun需要耗费的时间 以及 10次testFun所要耗费的时间。

七、总结

还有一些 比如 trace(), group()等，因为不常用，所以不在这里介绍了。

以上内容中的demo，都可以直接在控制台中运行。

通过在各大论坛搜集和筛选，本篇已经提炼出了部分常用的方法。