重写console.log(浏览器)内容样式其实很简单

524 阅读1分钟

前言:

最近一个很好的前端同事问到了一个问题:你说说怎么重写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;`)

image.png

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

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

image.png

(3)可以用cssbackground 插入图片效果

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

image.png

这里有两个注意点:

  • %c 后面必须插入至少一个字符,所以这里加了一个空格;
  • console.log 中 的 css 不能支持 widthheight,所以这里用 padding 设置宽度和高度。
  • 我试了几次,好像base64格式图片才行???

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

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

export function formatDate(date = new Date()) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}-${month}-${day}`;
}

export function logDate(str, color = 'red', fontSize = '12px') {
  const currentDate = formatDate();
  console.log(`%c${currentDate}: ${str}`, `color: ${color}; font-size: ${fontSize}; border:1px solid teal; font-weight: 600`);
}

封装好之后使用的时候如下引入并且使用

<script setup>
import { logDate } from '@/utils/formatDate';

function dateHandler() {
  logDate(`封装带日期的log!`);
}
</script>

image.png

小结:

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