JavaScript console加拦截扩展控制log输出级别(浏览器能trace代码位置)

需求-不同运行等级下输出不同等级日志

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

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

实现原理

复写一个新的console对象，新console对象上的getter名字和window.console上的方法保持一致，getter方法根据运行环境来判断是否返回window.console方法还是一个空函数，一些拦截也可以放到getter里面，比如上报错误日志等

代码实现

JConsole.js es6 class源码

源码在这呢，方便小伙伴扩展

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;
  }

}

jConsole fun工厂模式，支持老版本js

function getJConsole(originalConsole, logLevelText) {
    var logLevel = 0;
    switch (logLevelText) {
        case "debug":
            logLevel = 0;
            break;
        case "log":
            logLevel = 1;
            break;
        case "info":
            logLevel = 2;
            break;
        case "warn":
            logLevel = 3;
            break;
        case "error":
            logLevel = 4;
            break;
    }
    var jConsole = {
        get debug() {
            if (logLevel < 1) {
                return originalConsole.debug;
            } else {
                return function () {
                }
            }
        },
        get log() {
            if (logLevel <= 1) {
                return originalConsole.log;
            } else {
                return function () {
                }
            }
        },
        get info() {
            if (logLevel <= 2) {
                return originalConsole.info;
            } else {
                return function () {
                }
            }
        },
        get warn() {

            if (logLevel <= 3) {
                return originalConsole.warn;
            } else {
                return function () {
                }
            }
        },
        get error() {

            if (logLevel <= 4) {
                //此处可以加拦截事件
                return originalConsole.error;
            } else {
                return function () {
                }
            }
        },

        get memory() {
            return originalConsole.memory
        },
        get assert() {
            return originalConsole.assert
        },
        get clear() {
            return originalConsole.clear
        },
        get count() {
            return originalConsole.count
        },
        get dir() {
            return originalConsole.dir
        },
        get dirxml() {
            return originalConsole.dirxml
        },
        get exception() {
            return originalConsole.exception
        },
        get group() {
            return originalConsole.group
        },
        get groupCollapsed() {
            return originalConsole.groupCollapsed
        },
        get groupEnd() {
            return originalConsole.groupEnd
        },
        get markTimeline() {
            return originalConsole.markTimeline
        },
        get msIsIndependentlyComposed() {
            return originalConsole.msIsIndependentlyComposed
        },
        get profile() {
            return originalConsole.profile
        },
        get profileEnd() {
            return originalConsole.profileEnd
        },
        get select() {
            return originalConsole.select
        },
        get table() {
            return originalConsole.table
        },
        get time() {
            return originalConsole.time
        },
        get timeEnd() {
            return originalConsole.timeEnd
        },
        get timeStamp() {
            return originalConsole.timeStamp
        },
        get timeline() {
            return originalConsole.timeline
        },
        get timelineEnd() {
            return originalConsole.timelineEnd
        },
        get trace() {
            return originalConsole.trace
        },
    };
    return jConsole;
}


// 用法
window.console = getJConsole(window.console, "log");

console.debug("debug");
console.log("log");
console.info("info");
console.warn("warn");
console.error("error");

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");

对您有帮助的话请点赞👍