给 console 添加颜色
2019独角兽企业重金招聘Python工程师标准>>>
简评:使用 %c 声明可以给 console 的输出添加 CSS 样式,日志太多的话,给不同种类的日志设置不同的样式,可以极大的提升阅读体验。
什么是 %c
%c: 标识将 CSS 样式应用于 %c 之后的 console 消息。
给 console 消息设置多个样式
可以给同一条 Console 消息设置多种颜色。
console.log('Nothing here %cHi Cat %cHey Bear', // Console Message'color: blue', 'color: red' // CSS Style
);
给其他 console 消息设置样式
这里有五种 console 类型的消息:
console.log
console.info
console.debug
console.warn
console.error
你可以自定义自己的日志样式,例如:
console.log('%cconsole.log', 'color: green;');
console.info('%cconsole.info', 'color: green;');
console.debug('%cconsole.debug', 'color: green;');
console.warn('%cconsole.warn', 'color: green;');
console.error('%cconsole.error', 'color: green;');
处理多种 CSS 样式
如果要输出的样式比较多,字符串会比较长,这里有一个小技巧, 生成一个 CSS Array ,通过 join(';') 来合并成一个 CSS String。
例如:
// 1.将css样式传递给数组
const styles = [ 'color:green','background:yellow','font-size:30px','border:1px solid red','text-shadow:2px 2px black','padding:10px',
]。join(';'); // 2.连接单个数组项并将它们连接成一个用分号分隔的字符串(;)
// 3.传递样式变量
console.log('%cHello There',styles);
// or
console.log('%c%s', styles, 'Some Important Message Here');
在 Node.js 中设置 console 消息样式
在 node.js 环境,你可以使用 Color Reference 来设置样式。例如:
// Cyan
console.log('\x1b[36m%s\x1b[0m', 'I am cyan');
// Yellow
console.log('\x1b[33m%s\x1b[0m', 'yellow' );
原文: Colorful Console Message
转载于:https://my.oschina.net/jpushtech/blog/2961630
给 console 添加颜色相关推荐
- 给手绘图着色(添加颜色或色彩):CVPR2020论文点评
给手绘图着色(添加颜色或色彩):CVPR2020论文点评 Learning to Shade Hand-drawn Sketches 论文链接:https://arxiv.org/pdf/2002.1 ...
- python使用matplotlib可视化、使用matplotlib可视化scipy.misc图像、自定义使用grey灰色映射、将不同亮度映射到不同的色彩、并添加颜色标尺
python使用matplotlib可视化.使用matplotlib可视化scipy.misc图像.自定义使用grey灰色映射.将不同亮度映射到不同的色彩.并添加颜色标尺 目录
- R语言配对图可视化:配对图(pair plot)可视化(根据分类变量的值为散点图上的数据点添加颜色和形状、Add color and shape by variables)
R语言配对图可视化:配对图(pair plot)可视化(根据分类变量的值为散点图上的数据点添加颜色和形状.Add color and shape by variables) 目录
- R语言配对图可视化:pivot_longer函数将宽格式的数据重塑为长格式并进行数据全连接和左连接(left join)、配对图可视化(根据分类变量的值为散点图上的数据点添加颜色)
R语言配对图可视化:pivot_longer函数将宽格式的数据重塑为长格式并进行数据全连接和左连接(left join).配对图可视化(根据分类变量的值为散点图上的数据点添加颜色,Add color ...
- R语言绘制火山图(volcano plot)实战:为差异表达基因(DEGs)添加颜色、基于显著性阈值进行点的颜色美化、为选定基因添加标签
R语言绘制火山图(volcano plot)实战:为差异表达基因(DEGs)添加颜色.基于显著性阈值进行点的颜色美化.为选定基因添加标签 目录 R语言绘制火山图(volcano plot)实战 #导入 ...
- 在linux下给grep命令添加颜色
1打开文件,添加如下一段话 vim ~/.bashrc alias grep='grep --color' 2退出保存 source ~/.bashrc ...
- 【Android 安装包优化】Tint 着色器 ( 简介 | 布局文件中的 Tint 着色器基本用法 | 代码中使用 Tint 着色器添加颜色效果 )
文章目录 一.Tint 着色器简介 二.布局文件中的 Tint 着色器基本用法 三.代码中使用 Tint 着色器添加颜色效果 四.参考资料 一.Tint 着色器简介 Tint 着色器的作用是是 可以使 ...
- uniapp 模糊搜索文字添加颜色
项目场景: 项目场景:最近写商城模块,遇到了搜索功能.模糊搜索,搜素框中的文字和检索出的内容一样的字添加颜色. 问题描述 例如:模糊搜索,搜素框中的文字和检索出的内容一样的字添加颜色. 分析: 首先要 ...
- 为上次渲染的三角形添加颜色
让我们在场景中添加一些颜色. 在本教程中,我们将为顶点添加颜色以为三角形着色. 这涉及更新顶点着色器以将颜色传递给像素着色器,像素着色器以输出传递给它的颜色,顶点结构添加颜色属性,输入布局包含颜色输入 ...
最新文章
- php a标签 执行js,关于a标签不能调用js方法的小细节,你注意到了么?
- 围成一圈的排列组合问题_约瑟夫问题
- pem格式证书编码 x509_公钥证书编码解读
- 飞鸽传书 bbs以及个人主页服务好不热闹
- 课后作业-阅读任务-阅读提问-4
- 计算机毕业设计中Java编程案例之学生管理系统
- IE浏览器“SEC7113: CSS 因 Mime 类型不匹配而被忽略”问题的解决方法
- SVN提示is already locked 解决办法
- 手机4k屏幕测试软件,手机4K屏、2K屏、1080p屏对比测试!惊叹
- javascript毫秒计时器_js实现精确到毫秒的倒计时效果
- python将png转为jpg,Python OpenCV读取png图像转成jpg图像存储的方法
- 16s扩增子 qiime2 实战
- 【毕业设计--开题报告】论文开题报告常见问题:参考论文格式,visio画箭头,wps段落设置
- C语言入门(一)——程序的基本概念
- 图片相似度判断-差异值哈希算法JAVA版
- Homepod评测:一款音质超棒但低智商的音箱
- WordPress插件 WP Rocket 缓存火箭加速优化插件 [更新至v2.7.4]
- 关于齐次坐标的理解(经典)
- 05-【gorm】GORM Model FindFirstWhere等查询函数的区别
- 4*4矩阵键盘及逐行扫描法