6 種不可不知的「console.log」進階應用
這篇文章寫於 2022 年，文中的工具與版本可能已經更新，實作時請以官方文件為準。
本文目錄
相信 console.log 是 Frontend 開發人員的好朋友，我們用它印出各種輔助資訊來解決問題。
這邊文章會跟你分享 6 種 console.log 的進階應用，並說明各自的使用情境，讓你在開發的路上更加順利。
大家可以在瀏覽器按下「F12」，於 Console 的分頁貼上文中的程式碼來驗證喔！
大鋼
ㄧ、在 console.log 加入 {}，讓資訊顯示的更友善
二、原來 console.log 竟然可以使用 CSS Style !
三、console.log 寫太多找不到重點？你該試試看 console.warn()！
四、錯誤訊息請用 console.error()，不要用 console.log() 來整自己
五、用 console.time() 追蹤程式執行時間，找出效能瓶頸
六、用 console.table() 將資訊轉成表格來閱讀
ㄧ、在 console.log 加入 {}，讓資訊顯示的更友善
如果想要將變數的內容印出來，我們通常會這麼做：
const name = "Dean";
const book = "給全端工程師的職涯生存筆記";
console.log(name, book);
原始碼：console-basic.js（GitHub Gist）
但這種作法在變數很多的時候，你就會搞不清楚各自對應的關係了，比如：
const name = "Dean";
const book = "給全端工程師的職涯生存筆記";
const skill = "Full-Stack";
const type = "Career";
console.log(name, book, skill, type);
原始碼：console-complex.js（GitHub Gist）
有沒有覺得上面的資訊閱讀起來很不友善？其實我們只要在 console.log 中，把這些變數用 {} 包起來，它就會以物件的類型來顯示嚕！
const name = "Dean";
const book = "給全端工程師的職涯生存筆記";
const skill = "Full-Stack";
const type = "Career";
console.log({ name, book, skill, type });
原始碼：console-object.js（GitHub Gist）
二、原來 console.log 竟然可以使用 CSS Style !
如果你在 Facebook 的頁面按下「F12」，於 Console 的分頁中應該會看到如下警告：
當時我就很好奇這種特殊的 Style 是怎麼呈現的，後來發現只要在前面加上「%c」就可以了：
const text = "大寶寶";
const style = "color: blue;font-size:40px";
console.log(`使用 CSS Style %c${text}`, style);
原始碼：console-css.js（GitHub Gist）
三、console.log 寫太多找不到重點？你該試試看 console.warn()！
遇到 Bug 時，我們常常需要沿著線索下 console.log 找問題，但如果 console.log 寫太多，我們會無法找到哪個才是我們需要的資訊，下面就舉一個極端點的例子：
for (let i = 0; i < 30; i++) {
if (i === 13) {
console.log(`i ---: ${i}`);
} else {
console.log(`i -+-: ${i}`);
}
}
原始碼：console-no-warn.js（GitHub Gist）
我相信大多數人第一眼是不會發現「i === 13」時印出的東西不同，但如果透過 console.warn() 來輔助就會一目瞭然：
for (let i = 0; i < 30; i++) {
if (i === 13) {
console.warn(`i ---: ${i}`);
} else {
console.log(`i -+-: ${i}`);
}
}
原始碼：console-warn.js（GitHub Gist）
四、錯誤訊息請用 console.error()，不要用 console.log() 來整自己
筆者發現有些工程師在 try…catch 的撰寫上，是用 console.log() 來印錯誤訊息的 😅
這會導致錯誤訊息被其他 console.log() 的訊息淹沒，運氣不好就是系統出包後才發現，因此建議乖乖使用 console.error() 來印錯誤訊息，這樣自己比較方便 Debug。
try {
// 直接拋錯誤訊息讓 catch 來接
throw "Something went wrong.";
} catch (err) {
console.error(err);
}
原始碼：console-error.js（GitHub Gist）
五、用 console.time() 追蹤程式執行時間，找出效能瓶頸
有時我們發現某些頁面跑的特別慢，為了確定問題到底出哪裡，「console.time() & console.timeEnd()」就是一個很好的方案：
console.time();
setTimeout(function () {
console.timeEnd();
}, 2000);
原始碼：console-time.js（GitHub Gist）
但一個功能裡面可能用到多個 api，當你想釐清到底是哪個 api 效率有問題時，就可以給 console.time() 加上標記(flag)。
console.time("api-1");
setTimeout(function () {
console.timeEnd("api-1");
}, 2000);
console.time("api-2");
setTimeout(function () {
console.timeEnd("api-2");
}, 1000);
原始碼：console-time-multi.js（GitHub Gist）
六、用 console.table() 將資訊轉成表格來閱讀
Backend 很常回傳 Table 格式的資訊，如果我們使用 console.log() 直接將結果印出來，在需要比對資料的時候會不好閱讀：
const users = [
{
name: "Dean",
email: "dean_lin@test.com",
department: "Cloud",
job_title: "Manager",
age: 33,
hire_date: "2016-06-06",
},
{
name: "Ray",
email: "ray_chen@test.com",
department: "Cloud",
job_title: "Engineer",
age: 31,
hire_date: "2019-06-06",
},
{
name: "Davy",
email: "davy_chang@test.com",
department: "Cloud",
job_title: "Designer",
age: 35,
hire_date: "2017-06-06",
},
];
console.table(users);
原始碼：console-array.js（GitHub Gist）
在上圖中，我們可以看到如果想要知道個別 user 的詳細資訊，需要自己手動展開 object，不過如果我們將最後的 console.log(users); 改寫成 console.table(users);，資料就會像下圖一樣變成表格很好閱讀嚕！
希望這篇文章對 Frontend 開發人員有所幫助，透過 console.log 的靈活使用，資料就會更清晰、準確地呈現！
留言載入中…