不要在JavaScript中使用 Console.log,试试这个

2023年 8月 31日 60.7k 0

调试,程序员极力避免的事情,因为这样只会在代码中产生更多的错误。

即使是最优秀的程序员,也会发现自己没有办法写,没有错误的代码。这就是为什么你应该总是需要调试代码。

调试JavaScript代码最佳方法之一是console.log()。除此之外还有更好的办法。

这就是本文的重点讲述与控制台交互的方法。在复杂的ide中输入consol可以提供自动完成提示功能。

除了console.log(),这里还有其他更好的选择。使用这些选项可以让调试过程变得更加容易和更快。

console.warn()和console.error()

当存在可以停止应用程序工作的错误时,使用console.log来调试它是行不通的。

这会是你的控制台消息变得异常混乱,让你找不到你想要找的消息。

使用console.warn() 和 console.error() 是克服这个问题的好方法。

console.warn("This is a warning");

console.error("This is an error")

时间operations

想看看这段代码运行需要多长时间?

使用console.time()

首先,创建一个计时器并为其指定一个唯一的名称。

console.time("Loop timer")

然后,运行该代码段。

for(i = 0; i < 10000; i++){
    // Some code here
}

然后调用 timeEnd().

console.timeEnd("Loop timer")

这是所有的代码。

console.time("Loop timer")
for(i = 0; i < 10000; i++){
    // Some code here
}
console.timeEnd("Loop timer")

这对于需要一些时间密集型应用程序非常有用,例如神经网络或 HTML Canvas 读取。

最终代码的运行

想看看函数是如何被调用的吗?

function trace(){
    console.trace()
}
function randomFunction(){
    trace();
}

在这里,有一个名为randomFunction 调用trace,它又调用console.trace()。

所以当你调用randomFunction, 你会得到类似如下的输出。

上图显示的那个匿名的方法调用了 randomFunction, 然后调用 trace().

控制台消息分组

对控制台消息进行分组,可以使控制台更易于阅读。

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");
console.log("Test2!");

console.groupEnd()

所有的 Test2 归于 ‘My message group’组之下.

清除控制台消息

如果你遵循本教程,那么你的控制台将会非常满。让我们把它清除掉。

console.clear();

下面就是结果。

没有什么特别的,我只是又清除了一遍,让我们继续。

表格

让我们添加表格,以更好的可视化数据,想象一下我们有两个对象。

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

简单的使用console.log 只会让数据看起来很混乱。

使用表格就会更好一点。

console.table({person1, person2})

从未见过JavaScript控制台可以如此的干净,对吧?

在控制台中使用CSS ?

是的,你没看错,你可以将css添加到控制台。

console.log("%c I love JavaScript!", 
  "color: red; background-color: lightblue; border: solid");

注意这个%c 标识. 这就是发挥魔法的地方。.

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论