相信 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 加入 {}，讓資訊顯示的更友善
如果想要將變數的內容印出來，我們通常會這麼做：
但這種作法在變數很多的時候，你就會搞不清楚各自對應的關係了，比如：
有沒有覺得上面的資訊閱讀起來很不友善？其實我們只要在 console.log 中，把這些變數用 {} 包起來，它就會以物件的類型來顯示嚕！
二、原來 console.log 竟然可以使用 CSS Style !
如果你在 Facebook 的頁面按下「F12」，於 Console 的分頁中應該會看到如下警告：
當時我就很好奇這種特殊的 Style 是怎麼呈現的，後來發現只要在前面加上「%c」就可以了：
三、console.log 寫太多找不到重點？你該試試看 console.warn()！
遇到 Bug 時，我們常常需要沿著線索下 console.log 找問題，但如果 console.log 寫太多，我們會無法找到哪個才是我們需要的資訊，下面就舉一個極端點的例子：
我相信大多數人第一眼是不會發現「i === 13」時印出的東西不同，但如果透過 console.warn() 來輔助就會一目瞭然：
四、錯誤訊息請用 console.error()，不要用 console.log() 來整自己
筆者發現有些工程師在 try…catch 的撰寫上，是用 console.log() 來印錯誤訊息的 😅
這會導致錯誤訊息被其他 console.log() 的訊息淹沒，運氣不好就是系統出包後才發現，因此建議乖乖使用 console.error() 來印錯誤訊息，這樣自己比較方便 Debug。
五、用 console.time() 追蹤程式執行時間，找出效能瓶頸
有時我們發現某些頁面跑的特別慢，為了確定問題到底出哪裡，「console.time() & console.timeEnd()」就是一個很好的方案：
但一個功能裡面可能用到多個 api，當你想釐清到底是哪個 api 效率有問題時，就可以給 console.time() 加上標記(flag)。
六、用 console.table() 將資訊轉成表格來閱讀
Backend 很常回傳 Table 格式的資訊，如果我們使用 console.log() 直接將結果印出來，在需要比對資料的時候會不好閱讀：
在上圖中，我們可以看到如果想要知道個別 user 的詳細資訊，需要自己手動展開 object，不過如果我們將最後的 console.log(users); 改寫成 console.table(users);，資料就會像下圖一樣變成表格很好閱讀嚕！
希望這篇文章對 Frontend 開發人員有所幫助，透過 console.log 的靈活使用，資料就會更清晰、準確地呈現！
參考資源：It’s 2022, Please Don’t Just Use “console.log” Anymore
▶︎ 如果這篇文章有幫助到你1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼▶︎ 如果你對工程師的職涯感到迷茫1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯
