高級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");