2 min read

利用 CSS 美化瀏覽器的 `console`

Table of Contents

瀏覽器的console功能不少,除了最常用的log之外,還有代表不同狀態的:

  • info
  • warn
  • error

也有不同功能的:

  • time、timeEnd
  • table
  • dir
  • group
  • assert

本篇主要介紹console裡利用 CSS 改變輸出樣式的做法。

在console裡面,%這個符號代表 placeholder,它會依照順序將後面的argument(s)代入,比如console.log('%s', '我是一串文字'),會輸出我是一串文字,此處%s的 s 是 string 的意思,後面的 argument 1 會被當作字串看待。

瞭解%的用法後,想要改變console的樣式就很簡單了,只要使用%c就行了,底下範例我為了讓程式碼看起來清爽,因此文字就不使用上面%s的做法,而是直接用變數配合 ES6 的 template literals 來代入:

const style = [
  'color:blue',
  'background: white',
  'font-size: 20px',
  'border-radius: 5px',
].join(';');

const str = 'https://rex-tsou.com'; // 輸出的連結可以點!

console.log(`%c ${str} `, style);

多重 Style 也沒問題唷:

const style1 = [
  'color: red',
  'background: yellow',
  'font-weight: bold',
  'font-size: 20px',
  'border-radius: 5px 0 0 5px',
].join(';');

const style2 = [
  'color:blue',
  'background: white',
  'font-size: 20px',
  'border-radius: 0 5px 5px 0',
].join(';');

const string1 = 'Hello World!';
const string2 = 'Lorem ipsum.';

console.log(`%c ${string1} %c ${string2} `, style1, style2);

參考資料