不要在JavaScript中使用 Console.log，试试这个-51CTO.COM

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

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

调试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")

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

使用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添加到控制台。

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

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