关于前端:5分钟教你使用-consolelog-管理你的输出日志

3次阅读

共计 3449 个字符，预计需要花费 9 分钟才能阅读完成。

在开发过程中，咱们常常会应用 console.log 来输入一些信息，以便于咱们调试。然而，当咱们的我的项目越来越大，咱们的 console.log 也会越来越多，这时候咱们就须要对 console.log 进行治理，以便于咱们更好的调试。

以埋点为例子，本地开发中，咱们个别是通过打印埋点来看是否失效，这时候 埋点日志 可能跟其它日志混在一起，咱们很难找到咱们想要的日志，这时候咱们就须要对 埋点日志 进行治理，以便于咱们更好的调试。

logN.success("埋点", "page_click_report", {
    eventName: "page_click_report",
    params: {
        user_id: "linwu",
        age: "18",
        height: "171cm",
        sex: "male",
        wx: "linwu-hi"
    }
});

版本号信息

打印申请信息

有时候在混合 H5 开发的时候，接口并不是走 XHR 而是由客户端提供的 JSBridge 申请，这时候咱们就要对 log 进行一些解决，以便于咱们更好的调试。

间接 copy 上面的代码到我的项目中，能够间接应用, 童叟无欺啊亲

type Color = 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'error';

const COLORS: Color[] = ['primary', 'success', 'info', 'warning', 'danger', 'error'];

const COLOR_MAP: Record<Color, string> = {
  primary: '#2d8cf0',
  success: '#19be6b',
  info: '#909399',
  warning: '#ff9900',
  danger: '#35495E',
  error:"#FF0000"
};

const getColor = (type: Color) => COLOR_MAP[type];

const createLog = <T extends any[]>(fn: (type: Color, ...args: T) => void
): Record<Color, (...args: T) => void> => {return COLORS.reduce((logs, type) => {logs[type] = (...args: T) => fn(type, ...args);
    return logs;
  }, {} as Record<Color, (...args: T) => void>);
};

const nsLog = (type: Color, ns: string, msg: string, ...args: any[]) => {const color = getColor(type);
  console.log(`%c ${ns} %c ${msg} %c ${args.length ? '%o' : ''}`,
    `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
    `border:1px solid ${color}; padding: 1px; border-radius: 0 4px 4px 0; color: ${color};`,
    'background:transparent',
    ...args
  );
};

export const logN = createLog(nsLog);

const sLog = (type: Color, msg: string, ...args: any[]) => {const color = getColor(type);
  console.log(`%c ${msg} ${args.length ? '%o' : ''}`,
    `color: ${color};`,
    ...args
  );
};

export const logS = createLog(sLog);

const bLog = (type: Color, msg: string, ...args: any[]) => {const color = getColor(type);
  console.log(`%c ${msg} ${args.length ? '%o' : ''}`,
    `background:${color}; padding: 2px; border-radius: 4px; color: #fff;`,
    ...args
  );
};

 export const logB = createLog(bLog);

// Usage:
logS.primary("Primary message");
logN.success("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{
    "err_no": 0,
    "err_msg": "success",
    "data": {
        "user_basic": {
            "user_id": "3450719496318734",
            "user_name": "linwu",
            "company": "腾讯",
            "job_title": "高级前端开发工程师",
            "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/6c748ea6567c4afdd9f54dde04dbbfdf~300x300.image",
            "description": "☀高级前端开发工程师 \r\n🌲就任于腾讯等多家互联网大厂 \r\n📚《古代 Javascript 高级教程》、《古代 Typescript 高级教程》、《深入浅出 Dart》作者",
            "favorable_author": 1,
            "builder": 0,
            "book_author": 0,
            "can_tag_cnt": 0,
            "is_select_annual": false,
            "select_annual_rank": 0,
            "annual_list_type": 0,
            "university": {
                "university_id": "0",
                "name": "","logo":""
            },
            "major": {
                "major_id": "0",
                "parent_id": "0",
                "name": ""},"student_status": 0,"study_point": 0,"identity": 0,"is_vip": false,"is_logout": 0,"become_author_days": 49
        },
        "user_counter": {
            "followee_count": 0,
            "follower_count": 620,
            "post_article_count": 110,
            "digg_article_count": 111,
            "got_digg_count": 2072,
            "got_view_count": 104959,
            "post_shortmsg_count": 3,
            "digg_shortmsg_count": 3,
            "select_study_event_count": 0,
            "select_online_course_count": 0,
            "collection_set_article_count": 29,
            "recommend_article_count_daily": 36,
            "got_article_collect_count_daily": 0
        },
        "user_growth_info": {
            "user_id": 3450719496318734,
            "jpower": 7711,
            "jscore": 813.2,
            "jpower_level": 5,
            "jscore_level": 5,
            "jscore_title": "先锋掘友",
            "author_achievement_list": [1],
            "vip_level": 0,
            "vip_title": "","jscore_next_level_score": 2000,"jscore_this_level_mini_score": 500,"vip_score": 0
        }
    }
});

logN.error("接口", "https://api.juejin.cn/user_api/v1/user/get_info_pack",{
    "err_no": 0,
    "err_msg": "fail",  
});


logB.info("VERSION v1.0.0");