如何为你的JavaScript代码日志着色详解

前言

在使用 JavaScript 开发项目，可借助 console.log 来打印日志，以便捷分析问题；但，当接触相对比较项目，纯黑色的日志输出，就会使得其作用大大削弱；虽然 info， wran、error 等方法会区别颜色输出，但各自皆有其职责，不便挪来加以滥用；此时，就需求扩展些方法，来为你的 JavaScript 代码日志着色，使得日志可以发挥更大的价值。

要实现这个功能，其实很简单；利用 console.log 字符串替代和格式设置功能即可；下面为其格式说明符的完整列表：

说明符 输出
%s 将值格式化为字符串
%i 或 %d 将值格式化为整型
%f 将值格式化为浮点值
%o 将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O 将值格式化为可扩展 JavaScript 对象
%c 将 CSS 样式规则应用到第二个参数指定的输出字符串

传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个 % 符号与后面紧跟的一个字母组成，字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。

关于 console 更多功能和用法，可参见 使用控制台 | Google Developers；下面是对彩色输出 log 的一个简单示例：

console.log(`%c 倾城之链: %s`, 'color: #65c294', ': 一个蛮有用的网站')
console.log(`%c 倾城之链: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一个蛮有用的网站')

前面提及，当涉及到较大型项目，为了能从日志显现代码大致流向，最好可以封装方法，针对不同的模块日志，以不同颜色作下区分显示；这在一定程度上可以将所打出的日志利益更大化；下面是对此的一点实践方案：

const _gLogColorObj = {
 moduleA: '#009ad6', // 青色
 moduleB: '#65c294' // 若竹色
}

const _gConsole = (theme, args) => {
 const regStr = `%c@λ~${theme.toLocaleUpperCase()}: ${_gGetMatchStr(args)}`
 const color = _gLogColorObj[theme]
 console.log(regStr, `color: ${color}`, ...args)
}

const _gRegMatchObj = {
 object: '%o',
 function: '%o',
 number: '%i',
 string: '%s',
 undefined: '%s',
 boolean: '%s'
}

const _gGetMatchStr = args => {
 const cMatchArr = []
 for (let key in args) {
 cMatchArr.push(_gRegMatchObj[typeof args[key]])
 }
 return cMatchArr.join(' ')
}

const $log = {
 moduleA: (...args) => {
 _gConsole('moduleA', args)
 },
 moduleB: (...args) => {
 _gConsole('moduleB', args)
 }
 // 您可以在此定义更多方法，来区分不同模块；
}

上面代码中，主要基于表驱动法，根据所设计的模块名（Eg： moduleA）以及既定色值，彩色化你的 JS 代码日志输出，并指明日志所在模块；这样一来，即可使得日志输出更加清晰。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 使用javascript实现监控视频播放并打印日志

    最近在做一个项目,要求监控视频的播放事件并能够打印LOG日志,经过一番思索,使用javascript实现了此功能,代码如下: HTML: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Multi Source</tit

  • 如何为你的JavaScript代码日志着色详解

    前言 在使用 JavaScript 开发项目,可借助 console.log 来打印日志,以便捷分析问题:但,当接触相对比较项目,纯黑色的日志输出,就会使得其作用大大削弱:虽然 info, wran.error 等方法会区别颜色输出,但各自皆有其职责,不便挪来加以滥用:此时,就需求扩展些方法,来为你的 JavaScript 代码日志着色,使得日志可以发挥更大的价值. 要实现这个功能,其实很简单:利用 console.log 字符串替代和格式设置功能即可:下面为其格式说明符的完整列表: 说明符 输

  • JavaScript代码复用模式详解

    JavaScript代码复用模式详解

    代码复用及其原则 代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序.在谈及代码复用的时候,我们首先可以想到的是继承性.代码复用的原则是: 优先使用对象组合,而不是类继承 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们. 但在js中,我们可以使用构造函数和new操作符来实例化一个对象,这与其他使用类的编程语言在语法上有其相似之处. 例如: var trigkit4 = new Person();

  • javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.什么是例外处理 当 JavaScript程序在运行中发生了诸如数组索引越界.类型不匹配或者语法错误时,JavaScript解释器就会引发例外处理. ECMAScript定义了六种类型的错误,除此之外,我们可以使用Error对象和throw语句来创建并引发自定义的例外处理信息. 通过运用例外处理技术,我们可以实现用结构化的方式来响应错误事

  • 基于JavaScript表单脚本(详解)

    基于JavaScript表单脚本(详解)

    什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav

  • springboot使用logback文件查看错误日志过程详解

    这篇文章主要介绍了springboot使用logback文件查看错误日志过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <?xml version="1.0" encoding="UTF-8"?> <!-- 从高到地低 OFF . FATAL . ERROR . WARN . INFO . DEBUG . TRACE . ALL --> <!-- 日志输出规则 根据当前ROOT

  • springboot配置logback日志管理过程详解

    这篇文章主要介绍了springboot配置logback日志管理过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先书写logback-spring.xml文件为: <?xml version="1.0" encoding="UTF-8"?> <configuration> <springProperty scope="context" name="

  • JavaScript This指向问题详解

    JavaScript This指向问题详解

    这篇文章主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言相比,函数的 this 关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下,

  • JS三级联动代码格式实例详解

    这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h

  • Python中logger日志模块详解

    1 logging模块简介 logging模块是Python内置的标准模块,主要用于输出运行日志,可以设置输出日志的等级.日志保存路径.日志文件回滚等:相比print,具备如下优点: 可以通过设置不同的日志等级,在release版本中只输出重要信息,而不必显示大量的调试信息: print将所有信息都输出到标准输出中,严重影响开发者从标准输出中查看其它数据:logging则可以由开发者决定将信息输出到什么地方,以及怎么输出: Logger从来不直接实例化,经常通过logging模块级方法(Modu

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

随机推荐