控制臺是每個開發(fā)過程中非常有用的部分。 我們出于各種原因使用它來記錄項目、查看數據、保留某些數據以供以后使用等等。 因此，考慮到經常要與它直接和間接地互動，我們介紹一種方法來賦予它美麗的外觀，可以使輸出的內容更加誘惑你的眼球。
在這篇文章中，我們將演示如何給console應用樣式。讓我們從記錄一個簡單的“Hello World！”開始。 并對其應用樣式。
輸出粉色的文字console.log(“%cHello world!”, “color:pink; font-size:30px”)
可以看到，其實就是對輸出內容，應用了css樣式而已，只要你會CSS, 你就可以充分發(fā)揮你的想象力來定制化你的console。再來點例子：
console.log(“%cThis is a default font style”,”color: blue; font-size: 20px”);console.log(“%cThis is a custom font style”,”color: blue; font-family:serif; font-size: 20px”);console.log(“%cThis is a custom font style”,”color: blue; font-family:monospace; font-size: 20px”);console.log(“%cThis is a custom font style”,”color: blue; font-family:sans-serif; font-size: 20px”);
稍微復雜點的例子如下：
console.log(‘%c Hello World!!’, ‘font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)’);
對了，你還可以改變背景顏色，甚至加入漸變色：
console.log(‘%c 太棒了!!’, ‘background:linear-gradient(to right, #fc5c7d, #6a82fb); color:white; font-size:40px; padding:15px;’)
console.warn, console.error同樣適用哦。
怎么樣，是不是很酷？
最后提醒大家，不要忘記要在顯示內容的前面加上%c說明符來設置控制臺的內容。
