【进步一点】console,给你点颜色看看

519 阅读1分钟

前言

console.log方法用于在控制台输出信息,作为一个前端开发者,可能每天都会用它来分析调试,但是这个简单的函数其实不单纯,它可以很花里胡哨。

常见console消息样式

我们常用到的带一定样式的 console

  • console.log 无色
  • console.warn 黄色
  • console.error 红色

log 样式自定义 %c, eg:

console.log('%c *** ','color: red');
console.log('%c *** ','color: #ccc; font-size: 10px;');
console.log('%c *** ','color: #red; font-size: 10px; background: #aaa');

这样log输出的时候就会给 %c 后面的log内容增加你想要的颜色。

Node环境 log颜色

在node环境中Color Reference是一个很好的选择,eg:

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

样式对照

Reset = "\x1b[0m"
Bright = "\x1b[1m"
Dim = "\x1b[2m"
Underscore = "\x1b[4m"
Blink = "\x1b[5m"
Reverse = "\x1b[7m"
Hidden = "\x1b[8m"

FgBlack = "\x1b[30m"
FgRed = "\x1b[31m"
FgGreen = "\x1b[32m"
FgYellow = "\x1b[33m"
FgBlue = "\x1b[34m"
FgMagenta = "\x1b[35m"
FgCyan = "\x1b[36m"
FgWhite = "\x1b[37m"

BgBlack = "\x1b[40m"
BgRed = "\x1b[41m"
BgGreen = "\x1b[42m"
BgYellow = "\x1b[43m"
BgBlue = "\x1b[44m"
BgMagenta = "\x1b[45m"
BgCyan = "\x1b[46m"
BgWhite = "\x1b[47m"

对内容感兴趣的,点赞支持下哦!🙏