?

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

本文只是簡(jiǎn)單翻譯，部分不重要部分略去，請(qǐng)?jiān)彙?/p>

?

通過console.log()打印數(shù)組

試想一下，假如你創(chuàng)建了一個(gè)編程語言以及其文件后綴名列表：

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

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

該樹視圖對(duì)于調(diào)試是非常有用的，但我們不得不手動(dòng)打開每個(gè)折疊的對(duì)象來查看，比較麻煩。我們可以使用console.table()得到更好的體驗(yàn)。

?

通過console.table()打印數(shù)組

現(xiàn)在我們使用console.table()進(jìn)行打印。

console.table(languages);

你可以看到如下表格：

整齊漂亮，不是么？

當(dāng)然表單最適合表單數(shù)據(jù)呈現(xiàn)。如果每個(gè)對(duì)象都擁有不同的結(jié)構(gòu)，那么最后會(huì)發(fā)現(xiàn)有很多單元是undefined。盡管如此，屬性值都是整齊排列的，并給你很好的概述。

?

通過console.table()打印對(duì)象

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

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

?

過濾顯示的屬性

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

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

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

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

?

?

出處：https://www.cnblogs.com/justany/p/3429097.html

轉(zhuǎn)載于:https://www.cnblogs.com/mq0036/p/10319922.html

總結(jié)

以上是生活随笔為你收集整理的Javascript高级调试——console.table()的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。