欢迎大家来到IT世界,在知识的湖畔探索吧!

console.log 这个方法相信前端开发者都是用过的，它可以允许开发者向控制台打印一些有趣的内容或者Debug的信息，比如我们在百度首页打开控制台的时候，可以看到他们发布的招聘信息：

又或者在控制台打印一些有趣的小东西，比如这个“佛祖保佑，永无bug”的文字图案：

除此之外呢，console.log还有一些更有趣的功能，下面给大家介绍两点：

给log的文字添加样式

在输出文字时，可以使用 “%c” 开始，“%c”之后的文字我们就可以在后续的参数中使用css的样式对这些文字进行修饰，比如：

 console.log(`%c@盆盆儿WEB前端 \n%c 每日分享技术干货 \n %c  欢迎关注！`
   ,`
        color:red;
        font-size:25px;
   `
   ,`
        font-size:20px;
        margin-left:0;
   `,`
        font-size:20px;
        margin-left:0;
   `)

欢迎大家来到IT世界,在知识的湖畔探索吧!

可以看到，使用console.log , 我在控制台输出了不同颜色和大小的文字。

向控制台输出图片

上面说到，既然我们可以用css修饰文字，那么我可以把文字设置为空格（space）,然后使用css的background-image属性，将文字的背景设置为一张图片，通过使用font-size后者padding设置文字的大小来改变背景图的大小，这样用实现了向控制台打印图片了，话不多说，上代码：

欢迎大家来到IT世界,在知识的湖畔探索吧!  console.log(`%c  `,`
        font-size:100px;
        background:url(http://localhost:8080/test.jpg) no-repeat;
        background-size:100% 100%;
        margin-left:25px;
   `);

可以看到，控制台上就给我们输出了这一张图片！！！

看到这里，不知道大家有没有学会了呢 ？

如果你想了解更多细节，也欢迎点这里查看我录制的这个视频chrome调试小技巧（五）—— 你真的会使用console.log吗？

写在后面

如果你是前端开发者或者是对前端开发爱好者，欢迎大家点赞并且关注我哦，我会一直跟大家探讨和分享前端编程技巧，ღ( ´･ᴗ･` )比心