昨天，我發現了一個很棒的JavaScript除錯小工具，它是Chrome開發者工具之一。在小型Web開發會議中，Marcus Ross發表了關於在Chrome中實現各種JavaScript除錯工具的談話，其中之一就是我想在此展示的console.table()函式。
通過console.log()記錄陣列資料
想象一下你已經建立了一個程式語言及其副檔名的表：
|
1 2 3 4 5 6 7 |
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()函式的使用：
|
1 |
console.table(languages); |
要確保控制檯在重新整理頁面之前開啟，否則你可能會看不到任何輸出。如果你的一切操作都正確的話，作為回報，你將看到這個漂亮的小表格檢視：
很漂亮是吧？更棒的事情是——可以按照表的每一列來排序：
當然，此表對於表格格式的資料支援的最好。如果所有物件都有著完全不同的資料結構，你的表中將有大多數單元格含有未定義的值。儘管如此，屬性值的整齊排列也會給你一個很棒的總覽效果。
通過console.table()記錄物件資料
關於console.table()的另一個好處是它同樣適用於物件資料：
|
1 2 3 4 5 6 |
var languages = { csharp: { name: "C#", paradigm: "object-oriented" }, fsharp: { name: "F#", paradigm: "functional" } }; console.table(languages); |
這份禮物如上圖所示。
過濾顯示物件的屬性
如果你想通過某些屬性限制表中的列時，你可以通過傳遞一個鍵值陣列作為console.table()呼叫的第二個引數：
|
1 2 |
// Multiple property keys console.table(languages, ["name", "paradigm"]); |
對於單個屬性，一個簡單的字串引數就足夠了：
|
1 2 |
// A single property key console.table(languages, "name"); |
總結
我以為我知道大多數Chrome開發者工具自帶的功能，但是顯然我錯了。開發者工具中有很多很多有用的功能，只是在等你去使用它。說真的，去看看官方文件的頁面，沒準你會發現一些你不知道的很棒的功能。
更新：想要了解更多有用的控制檯方法嗎？在此期間，我已經寫了另一篇關於通過console.time()測量JavaScript執行時間的部落格。