如何为你的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中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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 cron中的批处理
2008/09/16 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP中文乱码解决方案
2015/03/05 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python中zip和unzip数据的方法
2015/05/27 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Django入门使用示例
2017/12/12 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
建筑设计所实习生自我鉴定
2013/09/25 职场文书
生产班组长岗位职责
2014/01/05 职场文书
小学语文教学反思
2014/02/10 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
大学活动总结模板
2014/07/10 职场文书
党员读书活动心得体会
2016/01/14 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang