高级控制台.Log提示和技巧(2020)

2021-06-16 09:28:14

控制台是浏览器的内置调试器。许多开发人员始终使用console.log()在其代码中打印消息和调试问题。但是这个工具可以提供比你意识到的更多更多!

正如我们所看到的,控制台对象比Good OL'Console.log()函数更多地提供了更多的服务。

事实是,可能有更好的方法来记录所需的任何东西。所有所需要的是知道您拥有的替代选项,并让自己习惯他们。

在本文中,我将介绍我作为Web开发人员期间采用的控制台对象的一些更有用的功能。看完后,如果控制台,可以为自己判断自己,以便留下您唯一的打印调试。

虽然console.log()在其字符串表示中打印对象,但Console.dir()将对象识别为对象,并以清洁可扩展列表的形式打印它的属性:

使用Console.Assert(),我们可以决定如果条件为false,则无法记录某些内容,并通过避免不必要的消息打印来保存某些控制台空间:

我们可以使用console.count()为我们执行工作!我们可以用这个例子中的标签(“宠物”)提供它,并且每个时间控制台值将增加(“宠物”):

我个人的最爱!使用console.table()来为每个对象的属性打印具有标记行的对象的视觉漂亮表表示:

一个受欢迎的人。使用console.time()启动计时器。然后,通过每个调用console.timelog(),自定时器启动以来经过的时间将被打印。完成后,调用console.timend()打印总时间量:

另一个非常有用!在深入嵌套对象或函数时,我们可能需要打印代码的堆栈跟踪。从呼叫堆栈顶部的函数中调用console.trace(),以查看调用它的代码中的确切位置:

可以将消息组分组以避免垃圾邮件并在控制台中删除:

额外提示:使用console.groupcollaped()而不是console.group(),并且默认情况下将折叠组。这也使眼睛更容易。

以防您想要刷新新的敬虔记录能力,在字符串之前使用“%c”并将CSS样式作为另一个参数传递:

有时我们没有意识到我们可以让我们的生活作为开发人员只是通过调整新的小习惯,就像是一个控制台专业人士一样轻松。