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

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

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

给log的文字添加样式

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

<code> 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;
   `)/<code>

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

向控制台输出图片

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

<code>  console.log(`%c  `,`
        font-size:100px;
        background:url(http://localhost:8080/test.jpg) no-repeat;
        background-size:100% 100%;
        margin-left:25px;
   `);/<code>

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

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

如果你想了解更多细节，也欢迎点这里查看我录制的这个视频

写在后面

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

閱讀更多 盆盆兒WEB前端 的文章

關鍵字: 百度 打印 技术