瀏覽器的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);