几年前，我为自己写了一个非常非常简单的插件:

要添加到你的页面，你所需要做的就是把这个放在头部:

<script src="https://jackcrane.github.io/static/cdn/jconsole.js" type="text/javascript">

然后在JS中:

jconsole.color.red.log('hellllooo world');

该框架有以下代码:

jconsole.color.red.log();
jconsole.color.orange.log();
jconsole.color.yellow.log();
jconsole.color.green.log();
jconsole.color.blue.log();
jconsole.color.purple.log();
jconsole.color.teal.log();

以及:

jconsole.css.log("hello world","color:red;");

对于任何其他css。上面的代码是用以下语法设计的:

jconsole.css.log(message to log,css code to style the logged message)

旧版本的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。进一步的参数被连接起来(一如既往)。

下面是另一种方法(在Typescript中)，它覆盖console.log函数并检查传递的消息，以便根据消息中的开始标记应用CSS格式。这个方法的一个好处是被调用者不需要使用一些包装console.log函数，他们可以坚持使用普通的console.log()，所以如果这个覆盖消失，该功能将恢复到默认的console.log:

// An example of disabling logging depending on environment:
const isLoggingEnabled = process.env.NODE_ENV !== 'production';

// Store the original logging function so we can trigger it later
const originalConsoleLog = console.log;

// Override logging to perform our own logic
console.log = (args: any) => {
    if (!isLoggingEnabled) {
        return;
    }

    // Define some tokens and their corresponding CSS
    const parsing = [
        {
            token: '[SUCCESS]',
            css: 'color: green; font-weight: bold;',
        },
        {
            token: '[ERROR]',
            css: 'color: red; font-weight: bold;',
        },
        {
            token: '[WARN]',
            css: 'color: orange; font-weight: bold;',
        },
        {
            token: '[DEBUG]',
            css: 'color: blue;',
        },
    ];

    // Currently only supports console.log(...) with a single string argument. 
    if (typeof args === 'string') {
        const message: string = args;
        let formattedArgs: string[] = [];
        for (let i = 0; i < parsing.length; i += 1) {
            const parser = parsing[i];
            if (args.startsWith(parser.token)) {
                formattedArgs = [`%c${message.substring(parser.token.length + 1, message.length)}`, parser.css];
                break;
            }
        }
        originalConsoleLog.apply(console, formattedArgs);
    } else {
        originalConsoleLog.apply(console, args);
    }
};

使用示例:

console.log('[ERROR] Something went wrong!');

输出:

我最近想解决一个类似的问题，构造了一个小函数，只对我关心的关键字进行着色，这些关键字很容易通过周围的花括号{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语句，以允许根据不同的原因使用多种样式

您可以使用自定义样式表为调试器着色。你可以把这段代码放在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;
}

在Chrome & Firefox(+31)中，您可以在console.log消息中添加CSS:

console.log('%c我的天哪!'， '背景:#222;颜色:# bada55 ');

同样适用于在同一命令中添加多个CSS。

参考文献

MDN:样式化控制台输出 Chrome:控制台API参考