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() 的功能上一樣,但可以理解成用途不一。 |