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

我的项目在开发模式下须要显示 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");

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