Chrome操作指南——入门篇(十)调试小技巧

163 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第十三天,点击查看活动详情

前言

上一章我们说到可以给每一条日志加上时间戳timestamps,来更好的分析日志信息。但有时候我们可以需要的不是这样,可能更需要的是代码的执行时间,对于这种情况,我们可以用的console的另一对方法来实现。

console.time() 和 console.timeEnd()

  • console.time(timerName):开启一个计时器。timerName:计时器的名字。默认名是default。
  • console.timeEnd(label): 结束计时并且将结果在 console 中打印出来。label:需要停止的计时器名字。

time.gif

console.dir(...)

  • console.dir(object): 显示object的JavaScript 对象的属性。

有时候我们可能想查看某些DOM节点的信息,以及相关的属性。我们就可以通过$('')和console.dir()结合来实现这个操作。

console.dir($('li'))

1660316865065.png

console.log()的样式

有时候访问某些网站的时候,你会发现在他们的控制台会出现一些各种样式的log信息。

比如知乎:

image.png

当给打印的文本中加上$c,那么%c后的文本,就可以在console.log的第二个参数中加入css代码来修改样式。

console.log('%c彼时彼刻恰如此时此刻', 'color: red;font-size: 50px')

image.png

当然,我们也可以根据自己的需要,打印各种各样的样式。

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;')

image.png