調試，程序員極力避免的事情，因為這樣只會在代碼中產生更多的錯誤。

即使是最優秀的程序員，也會發現自己沒有辦法寫，沒有錯誤的代碼。這就是為什么你應該總是需要調試代碼。

調試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 標識. 這就是發揮魔法的地方。.