网站地图    收藏    合作   

主页 > 前端 > javascript >

如何给js的console.log添加颜色

来源:未知    时间:2021-06-10 09:45 作者:小飞侠 阅读:

[导读] 如何给js的console.log添加颜色?使用 %c 声明可以给 console 的输出添加 CSS 样式,日志太多的话,给不同种类的日志设置不同的样式,可以极大的提升阅读体验。 什么是 %c %c: 标识将 CSS 样...

如何给js的console.log添加颜色?使用 %c 声明可以给 console 的输出添加 CSS 样式,日志太多的话,给不同种类的日志设置不同的样式,可以极大的提升阅读体验。

什么是 %c

%c: 标识将 CSS 样式应用于 %c 之后的 console 消息。

image.png

给 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 环境,你可以使用 Color Reference 来设置样式。例如:

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


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论