美化 console.log 輸出

前言

console.log() 方法可以說是前端工程師最常用的調試方法之一。當我在研究音樂播放器 Aplayer 源碼的時候，發現其中有一行有趣的代碼，可以在 console 裏面輸出自帶顏色的圖案，故此記錄一下。

方法

簡單來說就是插入 %c 這一個替換符，之後的句子便會加上相對應的樣式。

console.log(
  `${"\n"} %c CALPA %c https://calpa.me ${"\n"}${"\n"}`,
  "color: #6cf; background: #030307; padding:5px 0;",
  "background: #6cf; padding:5px 0;"
);

然後你打開 console 便會看到這個結果： Colorful Logger

另外一個例子：

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px"
);

Imgur

備註

以上代碼已注入到博客系統中，有興趣查閱代碼的同學可以查看源碼部分。

參考資料

關於 Calpa Liu

Calpa 是一個四天工作的系統架構師，日常幫助客戶構建一站式網站應用，手機應用，雲端架構。

2023 年 9 月，Calpa 收到來自國內外不同 Web3 團隊的邀請，參加韓國的 KBW 2023 和新加坡的 TOKEN 2049 活動。十二月份，Calpa 將參加台北區塊鏈週的 Hackathon 比賽。

Calpa 擅長運用各種前沿技術，包括 TypeScript、React.js 和 Vue.js，開發具有 Responsive Web Design 的網站。另外，他透過運用 aws-cdk 和 TypeScript 技術的融合，實現了基於雲端的「基礎即代碼」（Infrastructure as Code）部署策略，建立了多套高效且具有可伸縮性的全端架構。

同時，Calpa 積極參與各個社群，活躍於香港和台灣的開源社區，分享前沿知識。他曾在 2019 年的香港開源大會中擔任重要講者，為聽眾提供寶貴的工作經驗和深刻見解。此外，Calpa 在 GitHub 上公開分享了個人博客程式碼，已獲得超過 300 顆星星和 60 個分支。

如果您對系統架構有任何問題，或需要進一步交流，請隨時聯絡 Calpa，他非常歡迎討論。