博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
给 console 添加颜色
阅读量:6429 次
发布时间:2019-06-23

本文共 1225 字,大约阅读时间需要 4 分钟。

简评:使用 %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);// orconsole.log('%c%s', styles, 'Some Important Message Here');

在 Node.js 中设置 console 消息样式

在 node.js 环境,你可以使用  来设置样式。例如:

// Cyanconsole.log('\x1b[36m%s\x1b[0m', 'I am cyan');// Yellowconsole.log('\x1b[33m%s\x1b[0m', 'yellow' );
原文: 

转载地址:http://gziga.baihongyu.com/

你可能感兴趣的文章
Oracle Net Configuration(监听程序和网络服务配置)
查看>>
c语言_判断例子
查看>>
ubuntu重启不清除 /tmp 设置
查看>>
面向对象
查看>>
JSON
查看>>
SAP发布wbservice,如果有权限管控的话,需要给这个webservice加权限
查看>>
16.Python网络爬虫之Scrapy框架(CrawlSpider)
查看>>
stm 常用头文件
查看>>
mac 删除文件夹里所有的.svn文件
查看>>
程序制作 代写程序 软件定制 代写Assignment 网络IT支持服务
查看>>
mysql 案例~select引起的性能问题
查看>>
直接读取图层
查看>>
springsecurity 源码解读 之 RememberMeAuthenticationFilter
查看>>
HTML5标准学习 - 编码
查看>>
JS 时间戳转星期几 AND js时间戳判断时间几天前
查看>>
UVa11426 最大公约数之和(正版)
查看>>
SQL练习之求解填字游戏
查看>>
DOM
查看>>
UIApplication
查看>>
12:Web及MySQL服务异常监测案例
查看>>