如何在瀏覽器控制台中將資料顯示為表格

控制台是瀏覽器內建的工具，用來記錄網站上發生的錯誤。如果出現任何錯誤 - 例如斷開的連結、不完整的JavaScript函數或未知的 CSS 屬性 - 瀏覽器將在控制台中顯示錯誤訊息。

您還可以透過 shell 和 Console API 與 Console 進行交互，這對於測試某些功能和輸出資料很有用。在這裡，本文將向您展示使用 Console API 的有用技巧。

在瀏覽器上造訪控制台

在 Chrome 中，您可以選擇「檢視」>「開發者」>「JavaScript 控制台」來顯示控制台。此外，您還可以使用鍵盤快速鍵：OS X 上的Cmd+ Option+和 Windows 上的+ + 。JCtrlShiftJ

下面是一個沒有錯誤的 Chrome 控制台。

從這裡，您可以開始使用控制台 API 中提供的命令。

與控制台交互

您可以透過控制臺本身並新增 JavaScript 與瀏覽器的控制台進行互動。例如，這裡我們要求控制台輸出結果“Good Morning!”直接在控制台中輸入console.log()指令：

如前所述，您也可以套用console.log()。Console.log()可用來測試 JavaScript 條件語句。借助console.log() ，您可以更清楚地看到結果何時傳回真或假（true 或 false） 。

這是一個例子：

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

上面的程式碼將傳回true，因為變數包含數字1。在控制台中，您將看到瀏覽器輸出內容為「true」的文字。

以表格形式輸出數據

有時，您必須處理資料數組或物件列表，如下所示：

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

當我們使用 console.log() 方法時，這些資料將很難讀取。console.log()方法將在可折疊的樹視圖中顯示數組，如下所示。

當您必須處理這樣的陣列時，使用console.table()是輸出資料的更好方法。此方法以表格格式顯示資料。採用與上面相同的數據，結果將如下所示：

瀏覽器控制台可協助 Web 開發人員處理網站中的錯誤。使用者也可以使用它來檢查資料輸出，就像使用console.log() 方法一樣。當您有資料數組時，console.table()命令更有用，因為它以易於閱讀的表格格式顯示數組。請注意，console.table()僅適用於基於 Webkit 的瀏覽器，例如 Chrome、Safari 和最新版本的 Opera。

希望你成功。