重写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)可以用css的 background 插入图片效果

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 不能支持 width 和 height，所以这里用 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

小结：

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

avatar
文章
阅读
粉丝