重写并自定义console.log()输出样式

ice_bear221

已于 2023-06-11 20:17:47 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端

于 2023-06-11 20:17:33 首次发布

本文链接：https://blog.youkuaiyun.com/ice_bear221/article/details/131138439

前端专栏收录该内容

6 篇文章

订阅专栏

文章介绍了在开发中对控制台输出进行定制的需求，包括统一管理输出、调整输出样式以及根据不同阶段显示不同内容。作者提出了三种实现方式，从简单的函数重写到详细的日志封装，提供了输出等级、模式、图标和颜色等功能。最后，通过一个HTML测试案例展示了如何使用这个自定义的日志系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0. 背景

笔者在开发的实践过程中对于控制台内容的输出情况有一些特殊的需求，然而，普通的console.log()函数不能提供很好的支持，因此需要探索一些自定义的实现方式，以便满足开发需求，一些开发需求如下：

输出内容统一管理，调整开启或关闭；
不同的开发阶段显示不同的输出样式，如：测试、调试、生产；
统一样式调整；
……

1. 实现

1.1 简单重写：使用变量保存console.log

let fun = console.log
console.log = function () {
	fun(...arguments)
}

1.2 简单重写：使用立即执行函数

console.log = (function (oriLogFunc) {
	return function () {
		oriLogFunc('debug : ', ...arguments)
	}
})(console.log)

1.3 自定义封装

export default {
  // 输出等级: 0-no, 1-error, 2-warning, 3-info, 4-debug, 5-log
  level: 5,
  // 输出模式: 0-default, 1-normal, 2-random
  mode: 1,
  // 是否输出图标
  hasIcon: false,
  // 是否打印函数名和所在文件行号
  isPrintLine: true,
  // 图标
  icons: ['🌵', '🎍', '🐾', '🌀', '🐚', '🥝', '🥜', '🥕', '🥒', '🌽', '🍒', '🍅', '🍑', '🍋', '🍈', '🌶', '🌰', '🍠', '🍆', '🍄', '🍐', '🍌', '🍍', '🍇', '🍏', '🍓', '🍎', '🍊', '🐴', '🐗', '🦄', '🐑', '🐶', '🐔', '🐼', '🐒', '🌝', '💄', '💋', '👠', '👗', '👙', '🧣', '🍰', '🍭', '🍳', '🎄', '🎱', '⚽', '🏀', '🎵', '🚄', '⭕', '❌', '❓', '❗', '💯'],
  // 标准颜色
  colors: {
    error: '#f7630c',
    warning: '#ca5010',
    info: '#0078d7',
    debug: '#13a10e',
    log: '#1f1f1f'
  },
  // 获取随机图标
  randomIcon: function () {
    return this.icons[Math.floor(Math.random() * this.icons.length)]
  },
  // 获取随机颜色
  randomColor: function () {
    const r = Math.floor(Math.random() * 256)
    const g = Math.floor(Math.random() * 256)
    const b = Math.floor(Math.random() * 256)
    // 返回随机生成的颜色
    return `rgb(${r}, ${g}, ${b})`
  },
  // 默认打印
  printDefault: function (tag, args) {
    console.log(tag, ...args)
  },
  // 标准打印
  printNormal: function (tag, args) {
    console.log(`%c ${tag} : `, `color: ${this.colors[tag]}`, ...args)
  },
  // 随机打印
  printRandom: function (tag, args) {
    const icon = this.randomIcon()
    const bgColor = this.randomColor()
    const color = this.randomColor()
    console.log(`%c ${icon}`, `font-size:20px;background-color: ${bgColor};color: ${color};`, tag + ' : ', ...args)
  },
  print: function (tag, args) {
    if (this.isPrintLine) {
      // 获取函数名和行号
      const err = new Error()
      // console.log(err.stack)
      const stack = err.stack.split('\n').slice(3).map(line => line.trim())
      const caller = stack[0].match(/at (.+) \(/) ? stack[0].match(/at (.+) \(/)[1] : stack[0].match(/at (.+):\d+:/)[1]
      const fileLine = stack[0].match(/\(.*\/(.+)\)/) ? stack[0].match(/\(.*\/(.+)\)/)[1] : stack[0].match(/(\d+:\d+)/)[1]
      // console.log(`${caller} (${fileLine}):\n`)

      args.push(`\n at : ${caller} (${fileLine})`)
    }

    switch (this.mode) {
      case 0: {
        this.printDefault(tag, args)
        break
      }
      case 1: {
        this.printNormal(tag, args)
        break
      }
      case 2: {
        this.printRandom(tag, args)
        break
      }
    }
  },
  error: (function (oriLogFunc) {
    return function (...args) {
      const tag = 'error'
      if (this.level >= 1) {
        // oriLogFunc.call(console, 'error : ', args)
        this.print(tag, args)
      }
    }
  })(console.log),

  warning: (function (oriLogFunc) {
    return function (...args) {
      const tag = 'warning'
      if (this.level >= 2) {
        // oriLogFunc.call(console, 'warning : ', args)
        this.print(tag, args)
      }
    }
  })(console.log),

  info: (function (oriLogFunc) {
    return function (...args) {
      const tag = 'info'
      if (this.level >= 3) {
        // oriLogFunc.call(console, 'info : ', args)
        this.print(tag, args)
      }
    }
  })(console.log),

  debug: (function (oriLogFunc) {
    return function (...args) {
      const tag = 'debug'
      if (this.level >= 4) {
        // oriLogFunc.call(console, 'debug : ', ...args)
        this.print(tag, args)
      }
    }
  })(console.log),

  log: (function (oriLogFunc) {
    return function (...args) {
      const tag = 'log'
      if (this.level >= 5) {
        // oriLogFunc.call(console, 'log : ', ...args)
        this.print(tag, args)
      }
    }
  })(console.log)
}

2. 测试

目录

新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>123123123</div>
    <button id="logBtn">log</button>
    <script type="module">
        import iceLog from './iceLog.js'
        window.onload = () => {
            window.iceLog = iceLog
            iceLog.log('hello new log')
            iceLog.debug('hello new debug')
            iceLog.info('hello new info')
            iceLog.warning('hello new warning')
            iceLog.error('hello new error')
        }

        document.getElementById('logBtn').addEventListener('click', () => {
            iceLog.log('click log button')
        })
    </script>
</body>
</html>