前端重写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方法。


  • 2020-01-08 13:23:24

    vue 中使用eventbus

    为了提高组件的独立性和重用性,父组件会通过props向下传数据给子组件,当子组件又事情要告诉父组件时用通过$emit事件告诉父组件,如此确保每个组件都是独立在相对隔离的环境中运行,可以大幅度提高组件的可维护性

  • 2020-01-08 13:30:30

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)

    一开始的需求是这样子的,我为了实现两个页面组件之间的数据传递,假设我有页面A,点击页面A上的某一个按钮之后,页面会自动跳转到页面B,同时我希望将页面A上的某一些参数携带过去给页面B。 然后我就想,这不就是不同组件之间的数据传递问题而已吗?直接用bus 巴士事件来传递数据不就行了吗。于是,我就很愉快地进行了。关于vue中的eventbus的使用,我之前在一篇vue中的数据传递中有提到过。

  • 2020-01-08 22:03:07

    修改MAC系统下默认PHP版本

    今天在使用mac时遇到了一个问题,因为需要composer拉取laravel5.6,但是提示我php版本过低,但是我本人使用的是集成环境MAMP,已经切换了php7.2的版本,这个为什么没有生效呢?经检查是因为composer检测得是mac下环境变量生效的php版本

  • 2020-01-08 23:37:08

    laravel通过图片流返回图片

    我用laravel的字母头像生成框架Laravolt\Avatar生成的base64头像,但我想做个通用但,直接返回图片,我还是根据以往但经验 改写header但返回值为图片返回值,结果返回失败,一堆乱吗,不知道为啥。 后来用了laravel自带但返回图片但方法,结果ok。记录下

  • 2020-01-08 23:45:06

    laravel response 对象一些常用功能点

    通常,我们并不只是从路由动作简单返回字符串和数组,大多数情况下,都会返回一个完整的 Illuminate\Http\Response 实例或 视图。

  • 2020-01-08 23:49:13

    laravel 存储base64格式图片

    一、总结 一句话总结: 二、laravel存储64位图片实例 三、laravel 存储前端上传base64图片 四、php将base64字符串转换为图片

  • 2020-01-09 01:24:28

    mac安装ImageMagick与PHP扩展Imagick

    mac安装ImageMagick和php7.2扩展Imagick,从网上搜索教程,感觉好少,有的教程看起来也很麻烦,不过安装起来,没想到竟然如此简单。不非纯灰之力。