[JavaScript] 善用 Console 的小筆記

[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});

結果如下:

Google Chrome 的版本
Microsoft Windows cmd 的版本

追查訊息來源

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

例如:

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

//於 goodpractice.js

結果如下:

這裡不會告訴你第 30 行及 32 行的執行位置

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

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

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

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

//於 goodpractice.js

結果如下:

deleteDate @ … 為訊息建立位置,而 (anonymous) @ … 為訊息執行位置

總結

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

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

發表留言