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


  • 精彩推荐

  • 2019-11-28 11:00:35

    Vue子组件调用父组件的方法

    下面有三种方法，我自己重点推荐第一种，毕竟这种简单粗暴好用好理解，不过这个有一个弊端，再组件嵌套组件的时候，尤其是用第三方组件里面调用自己的子组件的时候，其实已经是孙子组件了，这个时候就要parent.parent。。。。,这样就不好了，我们就得考虑其他方法了，具体怎么判断是父组件，还是爷爷组件，我会单独出一篇文章讲述。

  • 2019-11-29 13:04:47

    计算一个多边形的重心点坐标（准确版）

    在之前的 《如何判断一个多边形是否合法》 一文中有提到，用无人机规划飞行路线前，往往需要框选一个多边形的区域。 而在地图控件上显示这个多边形区域时，往往会遇到这样一个需求：需要把所要测绘的多边形区域移动到地图中心。 实现这个需求的基本思路就是：获取到多边形区域的重心点坐标，然后利用地图控件的 setCenter方法，就可以把地图的显示中心移动到多边形区域重心了。那么问题来了，如何求出一个多边形的重心点坐标呢？

  • 2019-11-29 13:06:27

    如何判断一个多边形是否合法

    利用无人机对一片区域进行测绘前，我们会先在地图上框选一个区域，然后再规划飞行的路线，而需要测绘的这片区域往往是一个多边形。在 MeshKit 中，我们加入了多边形区域的编辑功能，其中就涉及判断用户所编辑出来的多边形是否合法的问题。

  • 2019-11-29 13:47:22

    百度地图做电子围栏总结

    在地图上画出围栏，设置围栏信息后保存，生成围栏列表。全选时，地图视野可看到全部的围栏区域，单独勾选会调整地图视野到当前勾选的围栏。围栏区域的中心点要显示围栏名称。

  • 2019-11-29 13:50:29

    图片连接处出现白线

    block导致，只要父元素设置font-size：0或者设置img display: block; 便可。但是我设置了没有用，这条线不是所有的机型都有，而且页面滚动之后又消失，我琢磨半天，各种尝试，发现把图片高度减少（增加）1px就解决了。因为我们的项目是用postcss-px-to-viewport，我每张图片都是设置高度的，应该是数值转换出现偏差。

  • 2019-11-29 13:54:07

    粗略计算多边形中心点（并不是很准确，但简单好用）

    也是再做栅栏系统，搜索如何获取多边形中心点的问题上，发现了这个，简单易于理解，但是并不是特变准确，但也不影响使用。 后来发现了新的算法，并且百度地图也提供相应的api。 具体内容我写在了前面的文章，大家可以找一下。

  • 2019-11-29 14:20:38

    vue,vuthis.$parent算法

    由于组件嵌套，其实vue parent的位置也改变了，我们可以通过下面的图片，来看一下，parent到底什么哪一层

  • 2019-11-29 14:23:24

    百度地图 多个标记点设置最佳视角

    通过下面的语法，我们可以为不规则图形，以及过大的图形进行地图适配，更好的展示我们画的图形，当然，如果展示所有的图形，我们可以暴力的把所有的点组合起来进行展示，点过多不知道会不会影响性能，不过我们也可以从后台精简点数，不过地球是圆的，不知道好不好做。