通俗易懂地重写浏览器console.log，让你在控制台个性化展示

背景：

最近一个很好的前端朋友问到了一个问题：你说说怎么重写console.log使其每次打印都带上当前日期? 刚听到时我思考了一下心想：还有这么奇葩的题目？？？然后特意去看了一下文档，确实可以重写成自己喜欢的样式，还挺有意思的。既然有意思然后当然就写个文章分享啦。

一、了解conlose.log占位符:

我们浏览器用conlose.log其实是可以改变样式的，甚至添加图片。
官方主要有提供五个占位符去控制conlose.log的，支持的占位符格式如下：

• 字符串：%s
• 整数：%d
• 浮点数：%f
• 对象：%o或%O
• CSS样式：%c

我们重写console.log主要用到的是%c占位符个性化去调整样式。

二、%c占位符改变样式的基本使用

(1)通过%c能调整打印内容的css样式，并且只有%c后面的内容才会生效。

console.log(`看看%c效果`, `color: red;font-size: 24px;`)

(2)样式后面接着写内容会拼接上去，并且默认样式

console.log(`看看%c效果`, `color: red;font-size: 24px;`, '再说吧')

(3)可以用css的 background 插入图片效果

let img = 'data:image/png;base64,iVBO........'
console.log('%c ', `padding: 16px; background: url(${img}) 100% / contain no-repeat;`, '看看内容先');

这里有两个注意点：

• %c 后面必须插入至少一个字符，所以这里加了一个空格；
• console.log 中 的 css 不能支持 width 和 height，所以这里用 padding 设置宽度和高度。

三、自己封闭一个返回当前日期的console.log

首尾呼应开头问题，其实就是和普通函数封闭的思维是一样，动态传参修改样式，不传就取默认值

let currentDate = new Date()
let year = currentDate.getFullYear()
let month = currentDate.getMonth() + 1
let day = currentDate.getDate()

const log = (str, color = 'red', fontSize = '12px') => {
  console.log(`%c${year}-${month}-${day}: ${str}`, `color: ${color}; font-size: ${fontSize}; border:1px solid teal;font-weight:600`)
}

// 调用自己封装的console.log
log(`封装带日期的log!`, 'blue', '24px')

小结：

重写的确实比较随意简单，主要就是看个思路知道能这么玩，如果写的不好希望能指出问题啊。