像专业人士一样掌握 JS console.log

1,166 阅读2分钟

仍然只使用console.log() 来调试?嗯,还有很多。

在浏览器控制台中打印消息肯定会拯救所有开发人员。

console.log() 消息就像在调试代码中的一些有线问题时治疗大多数疾病的药物。

多数开发人员都喜欢 -让我们在浏览器中打印消息以了解有关此问题的更多信息。我敢肯定,我不是唯一一个这样做的人。🤪

调试就像在犯罪电影中扮演侦探,而你同时也是凶手 — Filipe Fortes 🐛

除了最常用的 console.log( ) 消息在浏览器中打印消息之外,还有许多不同的方法可以使您的调试过程更容易。让我们用例子一一看看。

console.log( ) | info( ) | debug( ) | warn( ) | error( )

这些将根据提供给它们的事件类型直接打印具有适当颜色的原始字符串。

console log/info/debug/warn/error

使用占位符

你可以使用不同的占位符来动态的向字符串中插入内容

占位符作用
%s字符串
%d or %i整数
%f浮点数
%o可展开的DOM
%O列出DOM的属性
%c根据提供的css样式格式化字符串

占位符

为控制台消息应用CSS样式

你所有的控制台消息看起来都一样吗?好吧,从现在开始就不一样了,让您的日志在对您最重要的事情上看起来更吸引人。

带有颜色的消息

什么只为日志消息中的特定单词着色?给你😄

突出显示特定单词

你也可以只对中间的内容设置样式,你可以用其他的 %c 来重置后面的内容样式,但是记得包含 %c 的内容后需要有对应数量的 css 参数哦!

image.png

console.dir()

打印指定对象的 JSON 表示。

console.dir

console中的HTML元素

在控制台中获取 HTML 元素就像检查元素一样

image.png

console.table()

想要以适当且易于理解的方式查看 JSON?

更好地可视化对象数组哈!

console.group() & console.groupEnd()

分组消息

console.count()

此函数记录调用此特定调用的次数count()。此函数采用可选参数label

如果label提供,此函数会记录count()使用该特定label.

如果label省略,该函数会记录在此特定行count()调用的次数。

柜台

console.assert()

当您只想打印一些选定的日志时,这非常方便,即它只会打印 false 参数。如果第一个参数为真,它什么都不做。

image.png

console.trace()

此方法显示一个跟踪,显示代码如何在某个点结束。

image.png

console.time() / timeEnd()

console.time() 是跟踪操作所用时间的专用函数,是跟踪 JavaScript 执行所用微时间的更好方法。

image.png

console.memory

想知道我们的 JavaScript 应用程序如何使用浏览器内存?

image.png

console.clear()

这是最后但并非最不重要的 😁,要清除您所了解的所有上述控制台消息,是时候使用 clear() 命令销毁它们了

控制台变为空空如也