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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@前端小菜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值