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


Posted in Javascript onApril 08, 2019

前言

在使用 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 代码日志输出,并指明日志所在模块;这样一来,即可使得日志输出更加清晰。

总结

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

Javascript 相关文章推荐
jQuery源码分析之Event事件分析
Jun 07 Javascript
javascript下string.format函数补充
Aug 24 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
You might like
解析php取整的几种方式
2013/06/25 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python判断数字是否是超级素数幂
2018/09/27 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
HTML的form表单和django的form表单
2019/07/25 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
报关报检委托书
2014/04/08 职场文书
选秀节目策划方案
2014/06/06 职场文书
出生证明格式
2015/06/15 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python