像专业人士一样使用 console.log()

大写字母

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

各位开发者，大家好！

在本博客中，我将指导大家“如何使用 CSS 为 CONSOLE.LOG() 设置样式”。
我为大家准备了 12 种不同的样式，以确保您不会遇到任何困惑。

那么，我们就不浪费时间了，直接进入教程吧。

1. 在要设置样式的文本前添加 %c。
2. 在 console log 函数中添加一个参数，用于指定要应用的样式。

例如：

1. 为 JS 对象定义颜色（例如 #007acc）的简单控制台日志快捷方式
console.log("%cThis is my 1st style", "color: #007acc;", "CAPSCODE");

2. JSON 字符串输出
console.log('%cThis is my 2nd style', 'color: #007acc;', JSON.stringify({fname:'JOHN', lname:'DOE'}, null, "\t" ))

3. JS 对象简易控制台日志快捷方式 - 绿色文本
console.log("%cThis is my 4th style", "color: #26bfa5;", foo);

4. 适用于 JS 对象的简单控制台日志快捷方式 - 蓝色背景
console.log("%cThis is my 5th style", "color: white; background-color: #007acc;", foo);

5. 适用于 JS 对象的简单控制台日志快捷方式 - 绿色背景
console.log("%cThis is my 6th style", "color: white; background-color: #26bfa5;", foo);

6.控制台日志 -> Hello ${TM_FILENAME} line:${TM_LINE_NUMBER} on Green Background
console.log("%cThis is my 7th style", "background: green; color: white; display: block;");

7.查找样式错误
console.log("%cThis is my 8th style", "color: red; display: block; width: 100%;", error);

8.你的代码中需要一个彩虹符号
console.log("%c CapsCode!", "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); margin-bottom: 12px; padding: 5%");

9.感到困惑？！那就把这个人放到你的代码里。
console.log("%c ", "font-size: 1px; padding: 166.5px 250px; background-size: 500px 333px; background: no-repeat url(https://www.capscode.in/static/media/cap.0d0af8f0.png);");

10. JS 对象简易控制台日志快捷方式 - 绿色文本
console.log("%c ", "font-size: 1px; padding: 240px 123.5px; background-size: 247px 480px; background: no-repeat url(https://www.capscode.in/static/media/cap.0d0af8f0.png);");

11.庆祝你的代码成功！
console.log("%c ", "font-size: 1px; padding: 125px 125px; background-size: 250px 250px; background: no-repeat url(https://i2.wp.com/i.giphy.com/media/12BYUePgtn7sis/giphy-downsized.gif?w=770&ssl=1);")

12.编码 GIF
console.log("%c ", "font-size: 1px; padding: 215px 385px; background-size: 770px 430px; background: no-repeat url(https://i0.wp.com/i.giphy.com/media/ZVik7pBtu9dNS/giphy-downsized.gif?w=770&ssl=1);");

本文就到这里，希望大家喜欢。

如果我的文章对您有帮助

谢谢，

大写字母