雖然一招
console.log
就能打遍天下無敵手,但你其實有更好的選擇。
我知道我知道,這次的主題是「被忽略」的 Web API,Console 顯然不會是那個被大家忽略的,它可是各位 debug 的好夥伴,但你知道 Console 底下其實可不是只有 console.log
而已,還有很多更方便的 API 可以使用。
Console 這個物件提供了我們操作瀏覽器中除錯控制台(debugging console)的使用權,當按下 F12 後開啟瀏覽器的 Developers Tools,就可以看到 Console 面板,那就是除錯控制台啦。
而大家熟知的 console.log
就是在這個面板中打印出一筆紀錄訊息(log),但每當 Console 面板中的訊息五花八門越來越多時,就會常常眼花撩亂,反而阻礙我們進行除錯或開發,所以下面就介紹一些其實很好用但被使用度卻偏低的幾個 API。
顧名思義,count
當然是拿來計數的,每當我們呼叫一次 console.count
就會進行一次計數。
console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
這樣的功能我偶爾會在開發 Vue 專案的時候,用在元件的 update 的生命週期裡,可以觀察看看元件在實際操作前是否有過多的異常更新。
另外可以發現上面印出的內容除了數字不斷增加之外,還多了一個 default
的字串,這是因為 console.count
可以傳入一個參數來區隔不同的計數器,而這個參數預設值為 default
。
console.count(); // default: 1
console.count("foo"); // foo: 1
console.count(); // default: 2
console.count("bar"); // bar: 1
console.count("foo"); // foo: 2
需要的話你還可以這麼做...
let zoo = ["lion", "tiger", "zebra", "lion", "zebra"];
for(let i = 0; i < zoo.length; i++) {
console.count(zoo[i]);
};
// lion: 1
// tiger: 1
// zebra: 1
// lion: 2
// zebra: 2
這一組 API 主要可以讓你得知一段程式片段執行的時間,當你呼叫 console.time
時,瀏覽器會開始幫我們計時,直到你呼叫 console.timeEnd
,Console 面板便會打印出這兩個 API 被呼叫的的期間所花費的毫秒數。
console.time();
setTimeout(() => {
console.timeEnd();
}, 500);
// default: 505.10107421875 ms
其實透過上面這段程式碼就可以發現,setTimeout
其實並不是非常精準,只不過這樣的誤差可以省略不計,除此之外,default
字串又再次出現了,可想而知 console.time
是可以透過傳參來區隔計時器的。
console.time("bar");
console.time("foo");
setTimeout(() => {
console.timeEnd("bar");
}, 500);
setTimeout(() => {
console.timeEnd("foo");
}, 1000);
// bar: 501.56689453125 ms
// foo: 1004.574951171875 ms
偶爾你可能會遇到同個問題有不同作法,也許你可以考慮看看用 console.time
和 console.timeEnd
來測試哪一種解決方案比較省時。
偶爾我們 log
出的訊息或資訊非常的多,一不小心就會迷失在 Console 面板中,尤其是在 function
層級很複雜的時候,一時半刻的也分辨不出哪些訊息是哪邊印出來的,那這組 API 就可以派上用場了。
console.group("level_1"); // 開啟 group level_1
console.log("1-1"); // 在 level_1 中打印 1-1
console.group("level_2"); // 在 level_1 中開啟 group level_2
console.log("2-1"); // 在 level_2 中打印 2-1
console.group("level_3"); // 在 level_2 中開啟 group level_3
console.log("3-1"); // 在 level_3 中打印 3-1
console.groupEnd(); // 關閉 level_3
console.log("2-2"); // 在 level_2 中打印 2-2
console.groupEnd(); // 關閉 level_2
console.log("1-2"); // 在 level_1 中打印 1-2
透過上面的程式碼打印出的結果就會像是這樣,當你開啟了一個 group
後,之後的打印內容都會歸類在該 group
底下,並且你可以進行收合,讓 Console 面板的訊息可以更乾淨更有系統。例如下面這段程式碼,相比直接印出來,在前後進行 group
的操作,應該是更能看出程式順序。
for(let i = 1; i <= 5; i++) {
for(let j = 1; j <= 3; j++) {
console.log(j);
};
};
// this is better
for(let i = 1; i <= 3; i++) {
console.group("level"+i);
for(let j = 1; j <= 3; j++) {
console.log(j);
};
console.groupEnd();
}
table
這個 API 好不好用可能要看情境或因人而異,它主要的功能是可以將陣列或物件打印成一個表格,讓你在觀看時可以更一目了然。
let badminton_scoring = {
taiwan: 21,
china: 12
};
console.table(badminton_scoring);
let olympics = [["gold", 2], ["silver", 4], ["copper", 6]];
console.table(olympics);
可以看到,利用 console.table
把陣列或物件打印就會是上面這樣的效果,另外要提的是,如果你打印的不是陣列或物件,那 console.table
就跟 console.log
沒有什麼不同。
我個人認為,這個 API 比較適合剛接觸程式語言的朋友,如果你對陣列或物件還不太了解,利用 console.table
把他們印出來,說不定能讓你更好理解。
不曉得各位是否有使用過這些 API 的經驗呢?如果還沒有,或許之後當你想要 console.log
的時候,可以再多想幾秒鐘,上面這些 API 說不定是你更好的選擇。