目标

在浏览器控制台输出一条带样式的信息，内容为：欢迎访问我的简陋网站

起步

实现该目标的基本原理，就是console.log，调用这个接口，传递一些特定样式字符串，即可实现既定目标。

console.log基本使用如下：

console.log("hello,world")

这没啥好说的，但是为了输出带样式信息，那么必须使用%c特殊格式符，类似于C语言的printf("%d", 123);。

写法如下：

console.log("%cI'm the message", "background: red;");

红底黑字，有点丑不是？这时候就可以发挥下CSS功力，来美化输出，一个参考如下：

var consoleSignatureStyle = "font-size: 16px;" +
  "background: linear-gradient(to right, #e66465, #9198e5);" +
  "color: white;" +
  "text-align: center;" +
  "padding: 10px 15px;" +
  "width: 100%;" +
  "border-radius: 20px;";

var consoleSignatureText = "%cDon't steal my cookies! 🍪";

console.log(consoleSignatureText, consoleSignatureStyle);

最终控制台输出如下：

注意：也可以使用backgeound-image来插入背景图片。我试过是可以的，你可以自己动手尝试下。

原文链接

Let's be fancy with a console signature (hashnode.dev)

如何在浏览器控制台打印花里胡哨的信息？

目标

起步

原文链接