如何为你的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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
详解vue-router基本使用
Apr 18 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JS实现简易留言板特效
Dec 23 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
php4的彩蛋
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python如何实现转换URL详解
2019/07/02 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Django用户身份验证完成示例代码
2020/04/03 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
信息管理员岗位职责
2013/12/01 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Win11 引入 Windows 365 云操作系统,适应疫情期间混合办公模式:启动时直接登录、模
2022/04/06 数码科技
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js