默认情况下，很少有内置的控制台方法来显示警告、错误和正常控制台以及特定的图标和文本颜色。

console.log(“console.log”); console.warn(“console.warn”); console.error(“console.error”);

但如果您仍然想应用自己的样式，您可以使用%c与消息和CSS样式规则作为第二个参数。

Console.log ('%cconsole.log'， 'color:绿色;'); console.warn(“% cconsole。警告'，'颜色:绿色;'); console.error(“% cconsole。错误'，'颜色:绿色;');

注意:在运行上述代码段时，请在浏览器控制台中检查结果，而不是代码段结果。

我怀疑是否有人会真正看到它，但对于那些想要在同一条线上混合几种颜色的人，我有一个简单的解决方案:

export enum Colors {
    Black = '\033[30m',
    Red = '\x1b[31m',
    Green = '\x1b[32m',
    Yellow = '\x1b[33m',
    Blue = '\033[34m',
    Magenta = '\033[35m',
    Cyan = '\033[36m',
    White = '\033[37m'
}


function color(text: string, color: color: Colors) {
    return `${color}${text}\x1b[0m`;
}


console.log(`This is ${color('green text', Colors.Green)} but this is black. This is red ${color('red', Colors.Red)} etc`);

我最近想解决一个类似的问题，构造了一个小函数，只对我关心的关键字进行着色，这些关键字很容易通过周围的花括号{keyword}识别。

这招很管用:

var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
_.each(splitText, (split) => {
    if (/^\{/.test(split)) {
        cssRules.push('color:blue');
    } else {
        cssRules.push('color:inherit')
    }
    styledText += `%c${split} `
});
console.log(styledText , ...cssRules)

从技术上讲，您可以用switch/case语句替换if语句，以允许根据不同的原因使用多种样式

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

//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')

您可以使用自定义样式表为调试器着色。你可以把这段代码放在C:\Documents and Settings<用户名>\Local Settings\Application Data\谷歌\Chrome\用户数据\Default\用户样式表\Custom.css(如果你在WinXP中)，但是目录因操作系统不同而不同。

.console-error-level .console-message-text{
    color: red;
}

.console-warning-level .console-message-text {
    color: orange;
}

.console-log-level .console-message-text {
    color:green;
}

我写了一个npm模块，提供了通过的可能性:

自定义颜色-文本和背景; 前缀——帮助识别源代码，如[MyFunction] 类型——像警告、成功、信息和其他预定义的消息类型

https://www.npmjs.com/package/console-log-plus

输出(带有自定义前缀):

clp({
  type: 'ok',
  prefix: 'Okay',
  message: 'you bet'
});
clp({
  type: 'error',
  prefix: 'Ouch',
  message: 'you bet'
});
clp({
  type: 'warning',
  prefix: 'I told you',
  message: 'you bet'
});
clp({
  type: 'attention',
  prefix: 'Watch it!',
  message: 'you bet'
});
clp({
  type: 'success',
  prefix: 'Awesome!',
  message: 'you bet'
});
clp({
  type: 'info',
  prefix: 'FYI',
  message: 'you bet'
});
clp({
  type: 'default',
  prefix: 'No fun',
  message: 'you bet'
});

输出(不带自定义前缀):

输入:

clp({
  type: 'ok',
  message: 'you bet'
});
clp({
  type: 'error',
  message: 'you bet'
});
clp({
  type: 'warning',
  message: 'you bet'
});
clp({
  type: 'attention',
  message: 'you bet'
});
clp({
  type: 'success',
  message: 'you bet'
});
clp({
  type: 'info',
  message: 'you bet'
});
clp({
  type: 'default',
  message: 'you bet'
});

为了确保用户不会呈现无效的颜色，我还编写了一个颜色验证器。它将通过名称、十六进制、rgb、rgba、hsl或hsla值来验证颜色