Chrome内置的JavaScript控制台可以显示颜色吗?

我想要错误在红色,警告在橙色和控制台。log在绿色。这可能吗?


当前回答

你可以试试:

console.log("%cI am red %cI am green", "color: red", "color: green");

输出:

其他回答

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

谷歌对此进行了记录 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");

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

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

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

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

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

更新:

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