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

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

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