倾城之链

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

为你的 JavaScript 代码日志着色

微注:原文首发于个人基于 Ghost 所搭建的最新博客:静轩之别苑 | 为你的 JavaScript 代码日志着色

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 代码日志输出,并指明日志所在模块;这样一来,即可使得日志输出更加清晰。

需要补充探讨的是,对于 Terminal 控制台的日志,对于关键部分,也是推荐着色输出的;这里推荐基于 chalk 来处理,例如 Vue 等流行框架也是采用这个库。另外,vConsole:一个针对手机网页的前端 console 调试面板,专为手机 Web 页面量身设计,帮助开发者更为便捷地进行开发调试工作。当你开发移动端相关项目,这也是蛮有用的工具。


您可能会感兴趣的文章:

打赏

广而告之


文章目录
  1. 1. 您可能会感兴趣的文章: