如何为你的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 dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
js的2种继承方式详解
Mar 04 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 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 全角转半角实现代码
2010/05/16 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python中的TCP socket写法示例
2018/05/11 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
档案检查欢迎词
2014/01/13 职场文书
学历公证委托书
2014/04/09 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
原告代理词范文
2015/05/25 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL