控制臺(tái)是每個(gè)開發(fā)過(guò)程中非常有用的部分。 我們出于各種原因使用它來(lái)記錄項(xiàng)目、查看數(shù)據(jù)、保留某些數(shù)據(jù)以供以后使用等等。 因此，考慮到經(jīng)常要與它直接和間接地互動(dòng)，我們介紹一種方法來(lái)賦予它美麗的外觀，可以使輸出的內(nèi)容更加誘惑你的眼球。
在這篇文章中，我們將演示如何給console應(yīng)用樣式。讓我們從記錄一個(gè)簡(jiǎn)單的“Hello World！”開始。 并對(duì)其應(yīng)用樣式。
輸出粉色的文字console.log(“%cHello world!”, “color:pink; font-size:30px”)
可以看到，其實(shí)就是對(duì)輸出內(nèi)容，應(yīng)用了css樣式而已，只要你會(huì)CSS, 你就可以充分發(fā)揮你的想象力來(lái)定制化你的console。再來(lái)點(diǎn)例子：
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”);
稍微復(fù)雜點(diǎn)的例子如下：
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)’);
對(duì)了，你還可以改變背景顏色，甚至加入漸變色：
console.log(‘%c 太棒了!!’, ‘background:linear-gradient(to right, #fc5c7d, #6a82fb); color:white; font-size:40px; padding:15px;’)
console.warn, console.error同樣適用哦。
怎么樣，是不是很酷？
最后提醒大家，不要忘記要在顯示內(nèi)容的前面加上%c說(shuō)明符來(lái)設(shè)置控制臺(tái)的內(nèi)容。
