5分钟教你使用 console.log 管理你的输出日志

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 5分钟教你使用 console.log 管理你的输出日志

前言


在开发过程中,我们经常会使用 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"
    }
});

image.png

  • 版本号信息

image.png

  • 打印请求信息

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

image.png


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

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
25天前
|
XML JSON Java
Logback 与 log4j2 性能对比:谁才是日志框架的性能王者?
【10月更文挑战第5天】在Java开发中,日志框架是不可或缺的工具,它们帮助我们记录系统运行时的信息、警告和错误,对于开发人员来说至关重要。在众多日志框架中,Logback和log4j2以其卓越的性能和丰富的功能脱颖而出,成为开发者们的首选。本文将深入探讨Logback与log4j2在性能方面的对比,通过详细的分析和实例,帮助大家理解两者之间的性能差异,以便在实际项目中做出更明智的选择。
158 3
|
25天前
|
存储 缓存 关系型数据库
MySQL事务日志-Redo Log工作原理分析
事务的隔离性和原子性分别通过锁和事务日志实现,而持久性则依赖于事务日志中的`Redo Log`。在MySQL中,`Redo Log`确保已提交事务的数据能持久保存,即使系统崩溃也能通过重做日志恢复数据。其工作原理是记录数据在内存中的更改,待事务提交时写入磁盘。此外,`Redo Log`采用简单的物理日志格式和高效的顺序IO,确保快速提交。通过不同的落盘策略,可在性能和安全性之间做出权衡。
1599 14
|
20天前
|
Python
log日志学习
【10月更文挑战第9天】 python处理log打印模块log的使用和介绍
20 0
|
22天前
|
数据可视化
Tensorboard可视化学习笔记(一):如何可视化通过网页查看log日志
关于如何使用TensorBoard进行数据可视化的教程,包括TensorBoard的安装、配置环境变量、将数据写入TensorBoard、启动TensorBoard以及如何通过网页查看日志文件。
124 0
|
25天前
|
存储 分布式计算 NoSQL
大数据-136 - ClickHouse 集群 表引擎详解1 - 日志、Log、Memory、Merge
大数据-136 - ClickHouse 集群 表引擎详解1 - 日志、Log、Memory、Merge
30 0
|
26天前
|
缓存 Linux 编译器
【C++】CentOS环境搭建-安装log4cplus日志组件包及报错解决方案
通过上述步骤,您应该能够在CentOS环境中成功安装并使用log4cplus日志组件。面对任何安装或使用过程中出现的问题,仔细检查错误信息,对照提供的解决方案进行调整,通常都能找到合适的解决之道。log4cplus的强大功能将为您的项目提供灵活、高效的日志管理方案,助力软件开发与维护。
47 0
|
2月前
|
Java
日志框架log4j打印异常堆栈信息携带traceId,方便接口异常排查
日常项目运行日志,异常栈打印是不带traceId,导致排查问题查找异常栈很麻烦。
|
2月前
|
存储 监控 数据可视化
SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
【9月更文挑战第2天】SLS 虽然不是直接使用 OSS 作为底层存储,但它凭借自身独特的存储架构和功能,为用户提供了一种专业、高效的日志服务解决方案。
135 9
|
3月前
|
API C# 开发框架
WPF与Web服务集成大揭秘:手把手教你调用RESTful API,客户端与服务器端优劣对比全解析!
【8月更文挑战第31天】在现代软件开发中,WPF 和 Web 服务各具特色。WPF 以其出色的界面展示能力受到欢迎,而 Web 服务则凭借跨平台和易维护性在互联网应用中占有一席之地。本文探讨了 WPF 如何通过 HttpClient 类调用 RESTful API,并展示了基于 ASP.NET Core 的 Web 服务如何实现同样的功能。通过对比分析,揭示了两者各自的优缺点:WPF 客户端直接处理数据,减轻服务器负担,但需处理网络异常;Web 服务则能利用服务器端功能如缓存和权限验证,但可能增加服务器负载。希望本文能帮助开发者根据具体需求选择合适的技术方案。
127 0
|
3月前
|
C# Windows 监控
WPF应用跨界成长秘籍:深度揭秘如何与Windows服务完美交互,扩展功能无界限!
【8月更文挑战第31天】WPF(Windows Presentation Foundation)是 .NET 框架下的图形界面技术,具有丰富的界面设计和灵活的客户端功能。在某些场景下,WPF 应用需与 Windows 服务交互以实现后台任务处理、系统监控等功能。本文探讨了两者交互的方法,并通过示例代码展示了如何扩展 WPF 应用的功能。首先介绍了 Windows 服务的基础知识,然后阐述了创建 Windows 服务、设计通信接口及 WPF 客户端调用服务的具体步骤。通过合理的交互设计,WPF 应用可获得更强的后台处理能力和系统级操作权限,提升应用的整体性能。
98 0