携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

众所周知，这是一个简单的浏览器控制台日志命令：

console.log("一个简单的浏览器控制台日志命令");

可以用不同方式给它上个色:

console.warn("一个带有警告标志的浏览器控制台日志命令")
console.error("一个带有错误标志的浏览器控制台日志命令")
console.info("一个带有信息标志的浏览器控制台日志命令")

实际上，console对象还有更多的用法。

计数

通过console.count()可以进行计数，其中传入的参数即表示一个计数标记，调用时相同标记的才进行累加：

function addA() {
	console.count("A")
}
function addB() {
	console.count("B")
}
addA() //输出：A:1
addA() //输出：A:2
addB() //输出：B:1

此外，也可以通过console.countReset()进行计数的重置：

// 在刚才的环境中继续
addA() //输出: A:3
console.countReset("A") //输出: A:0
addA() //输出: A:1

这个可以用于调试中记录方法运行次数，再也不需要额外引入一个外部变量了。

计时

在脚本卡顿时，我们往往会通过浏览器的Profiler来对各个方法和DOM渲染的运行时间进行分析，而使用console.time()，则是对方法渲染时间统计的一个方便的新选择。以console.time()开始，到console.timeEnd()结束（切记一定要成对出现）:

console.time("timeout")
setTimeout(() => {
    console.timeEnd("timeout") // 输出：timeout：3005 毫秒 - 倒计时结束
 },3000)

此外，你也可以选择使用console.timeLog()来打印时间而不结束计时器：

console.time("timeout")
setTimeout(() => {
    console.timeLog("timeout") // 输出：timeout: 2013ms
},2000)
setTimeout(() => {
    console.timeEnd("timeout") // 输出：timeout：3005 毫秒 - 倒计时结束
},3000)

显示堆栈

调试JS代码的过程中，我们往往想要追踪方法调用的堆栈以定位问题，一般的操作是浏览器开发工具中打断点进行查看，但是有些场景下断点不是那么合适，于是console.trace()就登场了，它的作用是输出当前的调用堆栈。

function trace() {
    console.trace();
}
function execute() {
    trace()
}
execute()
trace()

最后输出：

trace @VM70:2 //这是在控制台中调用的，如果实际代码中结尾这里应该是行号
execute @VM70:5
（匿名）@VM70：7

trace @VM70:2
（匿名）@VM70：7

美化相关

除了功能上的需求，有时候我们也需要对控制台输出的日志进行一定美化来提高日志的可读性（以及你看日志的心情，毕竟调试是一件十分心累的事情）。

分组

使用console.group()和console.groupEnd()可以进行分组，让不同类型不同对象不同方法中的日志归类显示出来。

console.group("0开头的")
console.log("01")
console.warn("02")
console.error("03")
console.groupEnd()
console.group("1开头的")
console.log("11")
console.log("12")
console.groupEnd()

表格

使用console.table()可以将数组、对象或者是二者的组合输出成表格。

console.table(["a","b","c"])

console.table({firstName:"Lin",lastName:"Yuchen"})

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("Lin", "Yuchen");
var jane = new Person("Hu", "Chengjin");
var emily = new Person("Li", "Hui");

console.table([john, jane, emily]);

设定CSS样式

对，你没有看错，console命令还支持设定CSS样式（虽然这个有点花哨了，可能娱乐属性多一些），语法就是在要设置的文本前输入%c，并在后面对应位置传入CSS属性：

console.log("this is a %cC%cO%cL%cO%cR","color:red","color:green","color:orange","color:purple","color:gray")

同样，字体大小加粗斜体都可以设置：

console.log("%cbig %csmall %cbold %citalic","font-size:20px","font-size:10px","font-weight:bold","font-style:italic")

那么，接下来试着在调试过程中丰富你日志的功能并使之丰富多彩吧！