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有两点不能很好地满足我们的需求
- 开发时需要log,但是上线时希望去掉log,但我们不可能每一行都删掉
- 对于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:
- 项目上线前记得将
isLog = true
哦 - 改写后打印后面的行数是
logFunc.call(console, ...arr)
,并不是原来调用的行数。由于功力有限,暂时没有很好地改变输出的行数,如果想查看的话,可以将isLogStack = false
。如果有大佬知道怎么改变输入行数的,希望下面留言哦。
改变前:
改变后:
相关文章推荐
- js中一些小细节,URL中单引号和双引号的差异以及在IE浏览器js中写console.log调试注意问题
- js调试工具console.log()方法查看js代码的执行情况
- Node.js 在命令行下执行Console.log()命令时,第二行会打印undefined的原因
- JS里try...catch...finally详解,以及console日志调试(console.log、console.info等)
- 非常好用的前端调试函数console.log()
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- js 调试 console.dir() 和 console.log() 区别
- JavaScript中的console.log()函数详细介绍
- JS调试——console.log()以外console的其它用法
- js在浏览器输出console.log
- js - 关于部分浏览器内置函数console详解(用开发调试的利器)
- 在js中获取query string 以及重写URL的函数
- js 调试 console.dir() 和 console.log() 区别
- Node.js console.log('中文') 乱码
- js中函数命名不能叫write(),否则整个页面会被重写(空白).
- JS--Console.log()详解
- 重写console.log 实现自己的逻辑
- js 中的console.log有什么作用
- console.log、toString方法与js判断变量类型
- JS脚本:console.log()用法小结