前端进阶：打造高颜值控制台日志工具库

前端进阶：打造高颜值控制台日志工具库

灵感来源

在复杂前端项目开发中，控制台日志的可读性和信息密度直接影响调试效率。原生console存在三大痛点：

1. 信息混杂：不同级别日志缺乏视觉区分（如普通日志与错误日志）
2. 对象可读性差：复杂对象展开层级多，关键数据难以快速定位
3. 缺乏结构化：日志头信息（时间戳、模块名）需要手动拼接

基于此，本文实现一个支持彩色标记、对象友好展示、多模式输出的日志工具库。

---

核心功能实现

// 类型检测工具函数
const isArray = (obj: any): boolean => 
  Object.prototype.toString.call(obj) === '[object Array]'

// 颜色映射配置
Logger.typeColor = (type: string) => {
   
   
  const colorMap = {
   
   
    primary: '#2d8cf0',  // 主色（蓝）
    success: '#19be6b',  // 成功色（绿）
    info: '#909399',     // 信息色（灰）
    warn: '#ff9900',     // 警告色（橙）
    error: '#f03f14'     // 错误色（红）
  }
  return colorMap[type] || '#35495E' // 默认深灰
}

// 核心打印方法
Logger.print = (type = 'default', text: any, back = false) => {
   
   
  if (typeof text === 'object') {
   
   
    isArray(text) ? console.table(text) : console.dir(text)
    return
  }
  
  const style = back ?