美化 console.log 輸出

日期: 04/03/2018

前言

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 便會看到這個結果:

另外一個例子:

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

備註

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

參考資料

  1. Console - MDN
  2. MoePlayer / APlayer

如果你覺得我的文章對你有幫助的話,希望可以推薦和交流一下。歡迎關注和 Star 本博客或者關注我的 Github