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

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

我发现你可以使用ANSI颜色代码制作带有颜色的日志，这使得在调试中更容易找到特定的消息。试一试:

console.log( "\u001b[1;31m Red message" );
console.log( "\u001b[1;32m Green message" );
console.log( "\u001b[1;33m Yellow message" );
console.log( "\u001b[1;34m Blue message" );
console.log( "\u001b[1;35m Purple message" );
console.log( "\u001b[1;36m Cyan message" );

更新:

去年我为自己写了一个JavaScript库。它还包含其他特性，例如调试日志的冗长性，还提供了一个导出日志文件的下载日志方法。看看JS Logger库和它的文档。

我知道现在回答有点晚，但由于OP要求在控制台获得不同选项的自定义颜色消息。每个人都在每个console.log()语句中传递颜色样式属性，这会在代码中创建复杂性，使读者感到困惑，也会损害代码的整体观感。

我的建议是写一个函数，用很少的预定颜色(例如成功，错误，信息，警告，默认颜色)，这些颜色将根据传递给函数的参数应用。

它提高了代码的可读性，降低了代码的复杂性。它太容易维护，并根据您的需要进一步扩展。

下面给出的是一个JavaScript函数，您必须编写一次，然后使用它 一次又一次。

function colorLog(message, color) {

    color = color || "black";

    switch (color) {
        case "success":  
             color = "Green"; 
             break;
        case "info":     
                color = "DodgerBlue";  
             break;
        case "error":   
             color = "Red";     
             break;
        case "warning":  
             color = "Orange";   
             break;
        default: 
             color = color;
    }

    console.log("%c" + message, "color:" + color);
}

输出:

默认颜色是黑色，在这种情况下，您不必传递任何关键字作为参数。在其他情况下，您应该传递成功、错误、警告或info关键字以获得所需的结果。

这是正在工作的JSFiddle。查看浏览器控制台中的输出。

实际上，我只是偶然发现了这个，好奇会发生什么，但你实际上可以使用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及之后的所有文本将切换为新颜色。

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

下面是另一种方法(在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!');

输出: