前言
上一章我们说到可以给每一条日志加上时间戳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;') 复制代码