昨天，我發現了一個很棒的JavaScript調試小工具，它是Chrome開發者工具之一。在小型Web開發會議中，Marcus Ross發表了關于在Chrome中實現各種JavaScript調試工具的談話，其中之一就是我想在此展示的console.table()函數。

通過console.log()記錄數組數據

想象一下你已經創建了一個編程語言及其文件擴展名的表：

var languages = [ 
    { name: "JavaScript", fileExtension: ".js" }, 
    { name: "TypeScript", fileExtension: ".ts" }, 
    { name: "CoffeeScript", fileExtension: ".coffee" } 
]; 
  
console.log(languages) 

調用console.log（languages）函數將會使你的數據得到如下顯示：

顯示樹狀結構圖的目的是為了對調試有所幫助，但是我覺得有點麻煩，因為需要手動打開每個折疊的對象。我的意思是，我們可以通過console.table()函數做的更好一點。

通過console.table()記錄數組數據

我們通過調用console.table()來代替console.log()函數的使用：

console.table(languages); 

要確保控制臺在刷新頁面之前打開，否則你可能會看不到任何輸出。如果你的一切操作都正確的話，作為回報，你將看到這個漂亮的小表格視圖：

很漂亮是吧？更棒的事情是——可以按照表的每一列來排序：

當然，此表對于表格格式的數據支持的***。如果所有對象都有著完全不同的數據結構，你的表中將有大多數單元格含有未定義的值。盡管如此，屬性值的整齊排列也會給你一個很棒的總覽效果。

通過console.table()記錄對象數據

關于console.table()的另一個好處是它同樣適用于對象數據：

var languages = { 
    csharp: { name: "C#", paradigm: "object-oriented" }, 
    fsharp: { name: "F#", paradigm: "functional" } 
}; 
  
console.table(languages); 

這份禮物如上圖所示。

過濾顯示對象的屬性

// Multiple property keys 
console.table(languages, ["name", "paradigm"]); 

如果你想通過某些屬性限制表中的列時，你可以通過傳遞一個鍵值數組作為console.table()調用的第二個參數：

// Multiple property keys 
console.table(languages, ["name", "paradigm"]); 

對于單個屬性，一個簡單的字符串參數就足夠了：

// A single property key 
console.table(languages, "name"); 

總結

我以為我知道大多數Chrome開發者工具自帶的功能，但是顯然我錯了。開發者工具中有很多很多有用的功能，只是在等你去使用它。說真的，去看看官方文檔的頁面，沒準你會發現一些你不知道的很棒的功能。

原文鏈接：http://blog.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable

譯文鏈接：http://blog.jobbole.com/60787/