携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第十三天,点击查看活动详情
前言
上一章我们说到可以给每一条日志加上时间戳timestamps,来更好的分析日志信息。但有时候我们可以需要的不是这样,可能更需要的是代码的执行时间,对于这种情况,我们可以用的console的另一对方法来实现。
console.time() 和 console.timeEnd()
console.time(timerName):开启一个计时器。timerName:计时器的名字。默认名是default。console.timeEnd(label): 结束计时并且将结果在console中打印出来。label:需要停止的计时器名字。
console.dir(...)
- console.dir(object): 显示object的JavaScript 对象的属性。
有时候我们可能想查看某些DOM节点的信息,以及相关的属性。我们就可以通过$('')和console.dir()结合来实现这个操作。
console.dir($('li'))
console.log()的样式
有时候访问某些网站的时候,你会发现在他们的控制台会出现一些各种样式的log信息。
比如知乎:
当给打印的文本中加上$c,那么%c后的文本,就可以在console.log的第二个参数中加入css代码来修改样式。
console.log('%c彼时彼刻恰如此时此刻', 'color: red;font-size: 50px')
当然,我们也可以根据自己的需要,打印各种各样的样式。
console.log('%c彼时彼刻恰如此时此刻', 'color: gray;font-size: 100px;text-align: center;background-color: #3c9;background-image: linear-gradient(0deg, #fff 5%, transparent 5%, transparent),linear-gradient(90deg, #fff 5%, transparent 5%, transparent);background-position: 0 0, 20px 20px;background-size: 20px 20px;')