对console.log的一种封装

继承露台
• 阅读 2797

对于一个特别喜欢用console.log来调试代码的人来说,console.log的一些坑和console.log的详细用法确实是一件值得深究的事。

先记录一下console.log的一些坑:
1.对于引用对象,比如Array和Object,打印出来的内容可能是当前在内存里的内容,而不是打印的那个时刻的内容
2.对于一个大型项目而言,如果console.log过多,管理满屏的console.log是一件很恐怖的事,因为你很可能找不到想要的信息

针对问题1,如果你还是要用console.log来debug,那么这是不可避免的。
解决方法1:改变习惯,以后用断点的方式调试。
解决方法2:使用JSON.stringify把对象变成字符串打印

本文主要针对【问题2】提供了一个解决方案。代码如下

let consoleVersion = [1000, 1001];

let emptyFunc = function(){}

let _log = function(version){
    if(consoleVersion.includes(version)){
        return console.log;
    }else{
        return emptyFunc;
    }
}

使用方式

log(1000)('显示1');
log(1001)('显示2');
log(1002)('不会显示1');
log(1003)('不会显示2');

原理是通过consoleVersion数组管理打印的内容,比如今天我需要调试登录模块
我们记录登录模块的console.log的调试内容为1001,那么所有的登录模块的打印都使用这样的方式打印

log(1001)('登录模块调试1');
log(1001)('登录模块调试2');
log(1001)('登录模块调试3');
log(1001)('登录模块调试4');
log(1002)('其他模块调试1');

然后设置

consoleVersion = [1001];

这样只会打印:
登录模块调试1
登录模块调试2
登录模块调试3
登录模块调试4

不会打印其他内容

点赞
收藏
评论区
推荐文章
ZY ZY
4年前
js堆和栈
浅析js中堆内存和栈内存我们常遇见的varletconst区别cont定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的consta1;console.log(a)//a;cosnole.log(a2)//报错constb;b.name1;console.log(b)//name:1con
小嫌 小嫌
3年前
js中箭头函数在对象内部的继承
function函数functionPerson()this.name'Jack',this.age25,this.sayNamefunction()console.log(this.name)functioninner()console.log(this.n
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
小嫌 小嫌
3年前
Javascript中的变量提升
定义JavaScript中奇怪的一点是你可以在变量和函数声明之前使用它们。就好像是变量声明和函数声明被提升了代码的顶部一样。sayHi()//Hithere!functionsayHi()console.log('Hithere!')name'JohnDoe'console.log(name)//JohnDoevarn
LinMeng LinMeng
4年前
js 基础之弱类型/变量提升/TDZ/块作用域/重复定义/Object.freeze()
弱类型在JS中变量类型由所引用的值决定varweb"helloWorld";console.log(typeofweb);//stringweb99;console.log(typeofweb);//numberweb{};console.log(typeofweb);//object变量提升
LinMeng LinMeng
4年前
vue的watch监听
vue的watch监听函数watch用来响应数据的变化,watch的用法大致有以下三种:1.监听某个变量watch:{name(newName,oldName){console.log(newName)//改变前的值console.log(oldName)//改变后的值
Stella981 Stella981
3年前
JavaScript同步、异步及事件循环
同步、异步JS是单线程的,每次只能做一件事情。像以下这种情况,代码会按顺序执行,这个就叫同步。console.log(1);console.log(2);console.log(3);以下代码会输出2、3、1,像这种不按顺序执行的,或者说代码执行中间有时间间隙的,叫异步。setTimeout((
Stella981 Stella981
3年前
JavaScript中相等判断和全等判断
引申:1.vara\0\  if(a)console.log(atrue) ;a\2\;atrue; //打印结果为false     2. varb2;if(b)console.log(btrue)  //打印结果为false 一下表格反应了当进行AB判断是进行的操作,一下内容来自h
Stella981 Stella981
3年前
JS关于Array的方法介绍
Array.length:数组的一条属性。基本用法:letarray1,2,3,4,5;console.log(array.length);//5Array.prototype:数组原型console.log(Array.prototype);//ObjectArray.isArr
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(