前端重写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-11-17 11:57:55

    app抓不到包,解决很简单

    1.手机安装virtualXpost 并激活xpost 框架,如有问题自行百度。 2.安装justTrustMe,然后再virtualXpost中添加此模块 3.安装手机抓包神器packet capture 4.在virtualXpost中运行app,并打开packet capture抓包就行

  • 2020-11-17 16:50:16

    JS常见加密混淆方式

    目录 前端js常见混淆加密保护方式 eval方法等字符串参数 emscripten WebAssembly js混淆实现 JSFuck AAEncode JJEncode 代码压缩 变量名混淆 字符串混淆 自我保护,比如卡死浏览器 控制流平坦化 僵尸代码注入 对象键名替换 禁用控制台输出 调试保护,比如无限Debug,定时Debug 域名锁定

  • 2020-11-17 17:08:28

    用js编写WebAssembly ,WebAssembly 现状与实战

    自从 JavaScript 诞生起到现在已经变成最流行的编程语言,这背后正是 Web 的发展所推动的。Web 应用变得更多更复杂,但这也渐渐暴露出了 JavaScript 的问题:

  • 2020-11-17 17:28:06

    AssemblyScript 开发WebAssembly 教程

    WebAssembly 以及通过 AssemblyScript 的扩展,不会使每个网站都神奇地变得更快,但是这并不重要。 WebAssembly 之所以令人兴奋,是因为它可以使更多的应用在 Web 变得中可行。

  • 2020-11-17 21:15:48

    如何保障 API 接口的安全性?前端如何加密

    一、1. HTTP 请求中的来源识别 二、2. 数据加密 三、3. 数据签名 四、4. 时间戳 五、5. AppID 六、6. 参数整体加密 七、7. 限流 八、8. 黑名单 九、1. 压缩 十、2. 混淆 undefined、3. 加密

  • 2020-11-18 14:34:00

    当你写爬虫抓不到APP请求包的时候该怎么办?

    提示:因为高级篇以后的APP将无法使用很通用的方式处理,每种类型甚至是每个APP的反抓包处理方式都会有差别,所以这个系列以后会以【高级篇-具体类型】的形式来写。

  • 2020-11-21 20:41:51

    Kotlin Sealed class类详解

    Sealed class(密封类) 是一个有特定数量子类的类,看上去和枚举有点类似,所不同的是,在枚举中,我们每个类型只有一个对象(实例);而在密封类中,同一个类可以拥有几个对象。

  • 2020-11-22 20:53:43

    Dagger2之Kotlin写法

    修饰构造方法 修饰变量,在宿主类里,引入要注入的实例