高級Javascript調試——console.table()

 

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

本文只是簡單翻譯，部分不重要部分略去，請原諒。

 

通過console.log()打印數組

試想一下，假如你創建了一個編程語言以及其文件后綴名列表：

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

console.log(languages);

console.log()會顯示如下信息：

該樹視圖對於調試是非常有用的，但我們不得不手動打開每個折疊的對象來查看，比較麻煩。我們可以使用console.table()得到更好的體驗。

 

通過console.table()打印數組

現在我們使用console.table()進行打印。

console.table(languages);

你可以看到如下表格：

整齊漂亮，不是么？

當然表單最適合表單數據呈現。如果每個對象都擁有不同的結構，那么最后會發現有很多單元是undefined。盡管如此，屬性值都是整齊排列的，並給你很好的概述。

 

通過console.table()打印對象

實際上console.table()還可以打印對象：

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

console.table(languages);

 

過濾顯示的屬性

如果你想限定每一列是特定的屬性，你還可以將他們的鍵作為一個數組，傳給console.table()，作為其第二個參數： 

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

如果只是想顯示一個屬性，則傳字符串就足夠了：

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