需要 - 不同运行等级下输入不同等级日志

我的项目在开发模式下须要显示 console debug、log、info、warn、error 级别

在生产环境下只输入 error 级别，或者碰到 error 级别的日志须要上报服务器

实现原理

复写一个新的 console 对象，新 console 对象上的 getter 名字和 window.console 上的办法保持一致，getter 办法依据运行环境来判断是否返回 window.console 办法还是一个空函数，一些拦挡也能够放到 getter 外面，比方上报谬误日志等

代码实现

JConsole.js 源码

源码在这呢，不便小伙伴扩大

import {LOG_LEVEL} from "../config";

// 日志等级和对应的名称
// 0"debug" 1"log",2"info",3"warn",4"error"

export class JConsole {
  private originalConsole;
  logLevel = 0;

  constructor(originalConsole) {originalConsole.log("LOG_LEVEL", LOG_LEVEL);
    this.originalConsole = originalConsole;
    switch (LOG_LEVEL) {
      case "debug":
        this.logLevel = 0;
        break;
      case "log":
        this.logLevel = 1;
        break;
      case "info":
        this.logLevel = 2;
        break;
      case "warn":
        this.logLevel = 3;
        break;
      case "error":
        this.logLevel = 4;
        break;
    }
  }

  get debug() {if (this.logLevel < 1) {return this.originalConsole.debug;} else {return () => {};}
  }

  get log() {if (this.logLevel <= 1) {return this.originalConsole.log;} else {return () => {};}
  }

  get info() {if (this.logLevel <= 2) {return this.originalConsole.info;} else {return () => {};}
  }

  get warn() {if (this.logLevel <= 3) {return this.originalConsole.warn;} else {return () => {};}
  }

  get error() {if (this.logLevel <= 4) {
      // 出错了，上报一下服务器或者告诉一下管理员
      return this.originalConsole.error;
    } else {return () => {};}
  }

  get memory() {return this.originalConsole.memory;}

  get assert() {return this.originalConsole.assert;}

  get clear() {return this.originalConsole.clear;}

  get count() {return this.originalConsole.count;}

  get dir() {return this.originalConsole.dir;}

  get dirxml() {return this.originalConsole.dirxml;}

  get exception() {return this.originalConsole.exception;}

  get group() {return this.originalConsole.group;}

  get groupCollapsed() {return this.originalConsole.groupCollapsed;}

  get groupEnd() {return this.originalConsole.groupEnd;}

  get markTimeline() {return this.originalConsole.markTimeline;}

  get msIsIndependentlyComposed() {return this.originalConsole.msIsIndependentlyComposed;}

  get profile() {return this.originalConsole.profile;}

  get profileEnd() {return this.originalConsole.profileEnd;}

  get select() {return this.originalConsole.select;}

  get table() {return this.originalConsole.table;}

  get time() {return this.originalConsole.time;}

  get timeEnd() {return this.originalConsole.timeEnd;}

  get timeStamp() {return this.originalConsole.timeStamp;}

  get timeline() {return this.originalConsole.timeline;}

  get timelineEnd() {return this.originalConsole.timelineEnd;}

  get trace() {return this.originalConsole.trace;}

}

demo.js

重点是浏览器还能追踪到代码 trace

import {JConsole} from "./JConsole";
window.console = new JConsole(window.console);
console.debug("debug");
console.log("log");
console.info("info");
console.warn("warn");
console.error("error");

对您有帮忙的话请点赞????