玩转控制台，让console.log千变万化

开篇寄语

在Javascirpt中肯定绕不开console.log，也就是调试，一般会在控制台输出，其实呢，该调试也能玩出很多有意思的事情，比如留下一段有趣的故事，各种有创意的图像，那么如何实现呢？请看本篇文章，同时会奉上一些有意思的方案。

内容详情

其实实现非常简单，只需要以下代码例子：

const style = 'font-size: 24px; color: red; padding: 8px;';
console.log('%cO(∩_∩)O 调试红色！', style);

生成效果如下所示：

很简单吧，但是要想生成出有特色的图案则需要讲究一些规则了，看一下其他例子，或许能够带给你启发。

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%");

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);");

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);");