抛弃console.log,试试这些…｜console(下)

详细介绍视频地址：【HTML/CSS/JS】抛弃console.log，试试这些… | console(下)

自定义console.log样式文章地址：5分钟重新认识一下console.log | 自定义console.log样式 ｜ console(上)

console.time/timeEnd 打印函数执行的时间

   let startTime = Date.now()
   Array(1000000).forEach(() => {});
   console.log(Date.now() - startTime)
   console.time('execution duration')
   Array(1000000).forEach(() => {});
   console.timeEnd('execution duration')

console.table 传入对象或数组 输出表格信息

const user = [{
	name: 'Billy',
	age: 22
	}, {
	name: 'Amy',
	age: 20
}]
console.log(user)
console.table(user)

console.dir 查看DOM元素的属性

const elem = document.querySelector('div')
console.log(elem)
console.dir(elem)

console.assert 用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常

console.assert(1 < 2, '正确不输出')
console.assert(1 > 2, '报错输出')

console.count 用于计数，统计代码或函数被调用了多少次

let func1 = () => console.count('Call func1')
let func2 = () => func1()
let func3 = () => func2()
func2()
func3()

console.group/groupEnd 用于将显示的信息分组，使用groupCollapsed可以折叠分组

console.group('Group A')
console.log('A1')
console.groupCollapsed('Group A1')
console.log('A1-1')
console.log('A1-2')
console.log('A1-3')
console.groupEnd('Group A1')
console.log('A2')
console.log('A3')
console.groupEnd('Group A')

console.trace 用于显示当前执行的代码在堆栈中的调用路径

let func4 = () => console.trace()
let func5 = () => func4()
func5()

console.clear 清空控制台

 console.clear()