更新:

去年我为自己写了一个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。查看浏览器控制台中的输出。

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

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

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

要链接横跨多行的CSS3样式，你可以这样做，

var styles = [
    'background: linear-gradient(#D33106, #571402)'
    , 'border: 1px solid #3E0E02'
    , 'color: white'
    , 'display: block'
    , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
    , 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');

console.log('%c a spicy log message ?', styles);

结果

查看更多信息:- https://coderwall.com/p/fskzdw/colorful-console-log

欢呼。

我最近想解决一个类似的问题，构造了一个小函数，只对我关心的关键字进行着色，这些关键字很容易通过周围的花括号{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')

我发现你可以使用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" );