JS中你不知道的console

console 的多种方法

在 JavaScript 的开发过程中，console 是我们的得力助手。它不仅能帮助我们输出调试信息，还能让我们在代码运行时获取有价值的反馈。

debug

// 控制台打印 debug 类型信息
console.debug('debug')

info

// 控制台打印 info 类型信息
console.info('info')

log

// 控制台打印 普通 类型信息
console.log('log')

table

// 控制台打印 表格 类型信息
console.table([
  {a: 1, b: 2}, 
  {a: 3, b: 4, c: 5}
])

分组

// 控制台打印 分组 类型信息
// console.groupCollapsed(label) // 如果想让分组默认就是折叠的那么使用这个
const label = '分组'
console.group(label)
console.log('msg1')
console.log('msg2')
console.log('msg3')
console.groupEnd(label)

dir

// 控制台打印 元素对象结构 信息
console.dir(document.body)

计时

// 控制台打印 计时时间
console.time('time')
let start = Date.now()
while (Date.now() - start < 2000) {}
console.timeEnd('time')

计数

// 控制台打印 计数
let count = 0
while (count < 5) {
  console.count('count')
  count++
}

trace

// 控制台打印 堆栈 信息
console.trace()

断言测试

console.assert(1 === 2, '1 不等于 2')

警告

console.warn('warn')

错误

console.error('error')

清空打印

console.log(1)
console.clear()
console.log(2)

自定义打印样式

const styles = `
  padding: 5px 10px;
  background-color: #90442E;
  color: white;
  font-style: italic;
  border: 5px solid #E06E3C;
  font-size: 2em;  
  font-weight: bold;
`
console.log('%cMsg', styles)