您的位置:首页 > Web前端 > JavaScript

js重写console.log函数

2019-10-25 22:02 4963 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_39851888/article/details/102750660

重写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
    。如果有大佬知道怎么改变输入行数的,希望下面留言哦。

改变前:

改变后:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: