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

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

想象一下你已經(jīng)創(chuàng)建了一個編程語言及其文件擴展名的表：

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

調(diào)用console.log（languages）函數(shù)將會使你的數(shù)據(jù)得到如下顯示：

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

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

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

console.table(languages); 

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

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

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

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

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

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

這份禮物如上圖所示。

過濾顯示對象的屬性

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

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

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

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

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

總結(jié)

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

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

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