[JavaScript] 善用 Console 的小筆記

Javascript 中的 console 物件可以方便開發者去 debug ，此文章將介紹幾個有關 console 的 method 和使用技巧。

在 log() 中傳遞 Object

在 console.log() 中可以傳遞的型態很多，其中一個就是 Object。

const hoo = { name: "Nick", age: 19, married: false };
const boo = { name: "Jack", age: 27, married: false };
const zoo = { name: "Morry", age: 34, married: true };

console.log({hoo, boo, zoo});
//物件包含 hoo、boo 及 zoo 三個物件

結果如下：

改變 log() 顯示的文字 Style

在 console.log() 中是可以加入 CSS style ，你只要加入 %c 於 string 和 style 描述內容。

(*這對 Command line Interface 沒用)

console.log("%c Be water, My friend", "color:Aqua; font-weight:bold;");
//文字顏色轉為 Aqua，字體粗體。

結果如下：

計算建立一百萬個 Object 的時間

利用 time() 和 timeEnd() 可以計算中間花掉的時間。

console.time("Array initialize"); //開始計時

var array = new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
}
//建立一百萬個 Object

console.timeEnd("Array initialize");  //完結計時

結果如下：

顯示表格

利用 table() 可以讓物件以表格形式顯示。

const hoo = { name: "Nick", age: 19, married: false };
const boo = { name: "Jack", age: 27, married: false };
const zoo = { name: "Morry", age: 34, married: true };

console.table({hoo, boo, zoo});

結果如下：

追查訊息來源

平常的 log() 方法最多只會展示其訊息的建立位置，並不會告訴你執行位置。

例如：

const deleteData = () => console.log("start delete code");   //28 行
//29 行
deleteData();//30 行
//31 行
deleteData();//32 行

//於 goodpractice.js

結果如下：

於是我們可以利用 trace() 去知道其執行位置。如程式遇到 Bug ，我們可以更準確捕獲事故位置。

const deleteData = () => console.trace("start delete code");   //注意 log() 已改成 trace()

deleteData();//30 行-為訊息執行位置

deleteData();//32 行-為訊息執行位置

//於 goodpractice.js

結果如下：

總結

除了以上的，還有其他 Method 。因為自己不想篇幅太長，所以就不做詳盡紀錄了。以下列出其他未提及的 Method 好了：

warn()	顯示黃色警告字句 (有顯示其執行位置)
error()	顯示紅色警告字句 (有顯示其執行位置)
count()	在訊息後方顯示訊息執行次數
clear()	清除在此行執行之前的全部訊息
assert(arg, m)	當第一個 argument 為 false 時，顯示紅色警告字句 m
group(), groupEnd()	將訊息分成一組，方便查看。
groupCollapsed()	將訊息分成一組，開初時關閉。
info()	跟 log() 的功能上一樣，但可以理解成用途不一。