如何为你的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 相关文章推荐
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
使用jquery如何获取时间
Oct 13 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
原生js实现无缝轮播图效果
Jan 28 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
第八节 访问方式 [8]
2006/10/09 PHP
一步一步学习PHP(3) php 函数
2010/02/15 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
PHP模块化安装教程
2016/06/01 PHP
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
django url到views参数传递的实例
2019/07/19 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
Python with语句用法原理详解
2020/07/03 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
工业设计专业推荐信
2013/10/29 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
服务行业口号
2014/06/11 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
优秀教师先进材料
2014/12/16 职场文书
机关保密工作承诺书
2015/05/04 职场文书
销售人员管理制度
2015/08/06 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
这样写python注释让代码更加的优雅
2021/06/02 Python