前端-奇技淫巧-console.log的样式

控制台是每个开发过程中非常有用的部分。 我们出于各种原因使用它来记录项目、查看数据、保留某些数据以供以后使用等等。 因此，考虑到经常要与它直接和间接地互动，我们介绍一种方法来赋予它美丽的外观，可以使输出的内容更加诱惑你的眼球。

在这篇文章中，我们将演示如何给console应用样式。让我们从记录一个简单的“Hello World！”开始。 并对其应用样式。

输出粉色的文字
console.log("%cHello world!", "color:pink; font-size:30px")

可以看到，其实就是对输出内容，应用了css样式而已，只要你会CSS, 你就可以充分发挥你的想象力来定制化你的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说明符来设置控制台的内容。