js重写console.log函数

重写console.log函数

在前端开发中console.log是我们必不可少的调试工具，但是原生的console.log有两点不能很好地满足我们的需求

1. 开发时需要log，但是上线时希望去掉log，但我们不可能每一行都删掉
2. 对于Object和Array等引用类型，打印的时候是打印引用地址的值，并不是程序当前时刻的值，有时不注意就会发现打印前后是一样的，给调试带来了一定的困难

既然原生的console.log不能满足我们的需求，那就重写一个

/**
 * 重写console.log方法
 * 通过设置isLog来控制是否输出日志
 * 对于object,array引用类型已进行深拷贝，确保打印出的值是执行时的值
 * 重写后在整个程序的生命周期都有效，在程序的所有地方都可以调用
 * 可在程序的第一行就调用，确保后续的console.log改写后的
 * 如：vue在main.js中引入，小程序可在app.js第一行引入
 * dev: isLog = true
 * prod: isLog = false
 * console.trace()为打印程序调用的堆栈，因为改写后打印的值是在改写后的堆栈中
 * 如果觉得太长可设置isLogStack = false
 */

console.log = (function (logFunc, isLog = false, isLogStack = false) {
  return function () {
    if (!isLog) {
      return
    }
    try {
      let arr = []
      arr.push(...arguments)
      arr.forEach((item, index) => {
        if (Object.prototype.toString.call(item) === '[object Object]' ||
          Object.prototype.toString.call(item) === '[object Array]') {
          arr[index] = JSON.parse(JSON.stringify(item))
        }
      })
      logFunc.call(console, ...arr)
      isLogStack ? console.trace() : null  // 是否打印堆栈
    } catch (e) {
      console.log(`a log error: ${e}`)
    }
  }
})(console.log)

导入方式

最好在程序开始加载的地方引入

import './js/console'  // 直接引入即可，因为是自执行函数

演示

<script type="module">
    import './console.js'  // 浏览器要加.js后缀
    let str = [{x: 1}]
    console.log(str)
    str[0].x = 2
    console.log(str)
</script>

改写前：

改写后：
可以看到，改写前打印引用对象的值是一样的，因为都去取内存中的值；但改写后的已经是深拷贝后，打印的是另一块内存中的值，前后没有相互影响。

tips:

1. 项目上线前记得将isLog = true哦
2. 改写后打印后面的行数是logFunc.call(console, ...arr)，并不是原来调用的行数。由于功力有限，暂时没有很好地改变输出的行数，如果想查看的话，可以将isLogStack = false。如果有大佬知道怎么改变输入行数的，希望下面留言哦。

改变前：

改变后：