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前端 的文章

關鍵字: 百度 打印 技術