实际上，我只是偶然发现了这个，好奇会发生什么，但你实际上可以使用bash着色标志来设置Chrome输出的颜色:

console.log('\x1b[36m Hello \x1b[34m Colored \x1b[35m World!');
console.log('\x1B[31mHello\x1B[34m World');
console.log('\x1b[43mHighlighted');

输出:

查看这个链接了解颜色标志的工作原理:https://misc.flogisoft.com/bash/tip_colors_and_formatting

基本上用\x1b或\x1b来代替\e。如。\x1b[31m及之后的所有文本将切换为新颜色。

虽然我还没有在其他浏览器中尝试过这个功能，但我认为值得一提。

模板系统，有用的，如果你想创建彩色的行文本，而不为每个块创建完整的风格

var tpl = 'background-color:greenyellow; border:3px solid orange; font-size:18px; font-weight: bold;padding:3px 5px;color:';
console.log('%cMagenta %cRed %cBlue', `${tpl} magenta`, `${tpl} Red`,`${tpl} #4274fb`);

有一系列内置函数用于为控制台日志上色:

//For pink background and red text
console.error("Hello World");  

//For yellow background and brown text
console.warn("Hello World");  

//For just a INFO symbol at the beginning of the text
console.info("Hello World");  

//for custom colored text
console.log('%cHello World','color:blue');
//here blue could be replaced by any color code

//for custom colored text with custom background text
console.log('%cHello World','background:red;color:#fff')

旧版本的Chrome不允许你让console.log()以编程方式显示特定的颜色，但是调用console.error()会在错误行上放一个红色的X图标，并使文本变成红色，而console.warn()会让你变成黄色!图标。

然后，您可以使用控制台下面的All、Errors、Warnings和Logs按钮筛选控制台条目。

Firebug支持控制台的自定义CSS。从2010年开始，Chrome支持已经添加到Chrome 24。

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55',
            'more text');

当%c出现在第一个参数中的任何位置时，下一个参数将用作设置控制台行样式的CSS。进一步的参数被连接起来(一如既往)。

我为它创建了一个包。cslog

使用

npm i cslog

像这样使用它

import log from 'cslog'

log.h2("This is heading 2")
log.p("This is colored paragraph")
log.d(person, "Person Info")

你也可以自定义颜色。在这里

谷歌对此进行了记录 https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

CSS格式说明符允许您自定义控制台中的显示。使用说明符开始字符串，并给出希望应用的样式作为第二个参数。

一个例子:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");