如何为你的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 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
javascript 实现 原路返回
Jan 21 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
详解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实现链式操作的原理详解
2016/09/16 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
演讲稿格式
2014/04/30 职场文书
安全责任书
2015/01/29 职场文书
西安事变观后感
2015/06/12 职场文书
四年级数学教学反思
2016/02/16 职场文书