美化 console.log 輸出

作者: Calpa Liu
字數:770
出版日期:March 4, 2018
更新日期:December 7, 2023
分類: #前端開發
#JavaScript

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

備註

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

參考資料

  1. Console - MDN
  2. MoePlayer / APlayer
感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門