前端重写console.log方法

2020-12-29 16:28:45

nuxtjs项目,我本来像用插件来解决,但发现我没找到如何零活控制。

babel-plugin-transform-remove-console这个插件能解决,但是不灵活。


自己重写console却很好的能控制,并且在网页控制台输入变量,还能展示出来线上屏蔽的console。好用。

我们在开发前端的时候,有时候希望在开发和测试过程中,可以输出console.log日志,方便查看,但是在生产环境不需要再console.log的,于是想到重写console.log方法,以下有两种效果:

1. 和原生console.log一样效果

console.log = (function (oriLogFunc) {return function () {//判断配置文件是否开启日志调试if (!Config.isProduct) {try{oriLogFunc.call(console, ...arguments);}catch(e){console.error('console.log error', e);}}}})(console.log);

可以通过配置文件,决定是否要开启console.log输出。用法和原来一样,输出的效果和原生console.log一样,以下是输出结果图片:

 

2. 以数组方式输出效果

console.log = (function (oriLogFunc) {return function () {//判断配置文件是否开启日志调试if (!Config.isProduct) {try{if(arguments && arguments.length > 1){let first = arguments[0];let arr = Array.prototype.slice.call(arguments);let more = arr.slice(1);oriLogFunc.call(console, first, more);}else if (arguments && arguments.length == 1){oriLogFunc.call(console, arguments[0]);}}catch(e){console.error('console.log error', e);}}}})(console.log);

可以通过配置文件,决定是否要开启console.log输出。用法和原来一样,以下是输出结果图片:

 

 

两种方式都可以达到可配置console是否输出的效果,直接把代码放在程序最开始运行之前的位置就可以了。比如项目是RN,把这段代码放在src目录下的app.js文件运行;如果项目是小程序,把代码放在app.js的App()运行前面运行即可;如果项目是Vue,把代码放在main.js目录下运行即可。其它项目都可以类似的。

 

按照上面方法,还可以重写console.error、console.debug方法。


  • 2017-04-16 19:36:32

    ViewPager预加载问题和onCreateView多次调用问题的解决

    1,在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载(默认是左右各一个Frament)。通过设置setOffscreenPageLimit(int number) 来设置预加载的熟练,在V4包中,默认的预加载是1,即使你设置为0,也是不起作用的,设置的只能是大于1才会有效果的。我们需要通过更改V4包中的默认属性才可以

  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同

  • 2017-04-18 17:12:50

    Laravel 读取 config 下的数据

    Laravel的config下一般存放配置信息,可以通过config('key')方法获取指定的数据。 设置值可通过「点」式语法读取,其中包含要访问的文件名以及选项名称。

  • 2017-04-26 16:43:03

    php对象和数组相互转换的方法

    这篇文章主要介绍了php对象和数组相互转换的方法,通过两个自定义函数实现对象与数组的相互转换功能,非常简单实用,需要的朋友可以参考下