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

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


当前回答

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

其他回答

更新:

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

要链接横跨多行的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

欢呼。

从Chrome 60开始,他们删除了在编写console.info时使用蓝色文本的功能,并对控制台API做了很多改变。

如果你在es6模式中写一个字符串字面值,在console.log()中使用反勾号' '作为标识符(称为模板字符串),那么下面的方法可以为控制台输出着色。

console.log(`%cToday date=>%c${new Date()}`,`color:#F74C2F`, `color:green`);
// output :Today date (in red color) => Date (in green color)

const coloring = fn => ({ background, color = 'white' }) => (...text) => fn(`%c${text.join('')}`, `color:${color};background:${background}`); const colors = { primary: '#007bff', success: '#28a745', warning: '#ffc107', danger: '#dc3545', info: '#17a2b8', }; const dir = (key = '', value = {}) => { logs.primary(`++++++++++++start:${key}++++++++++++++`); console.dir(value); logs.primary(`++++++++++++end:${key}++++++++++++++`); }; const logs = Object.keys(colors) .reduce((prev, curr) => ({ ...prev, [curr]: coloring(console.log)({ background: colors[curr] }) }), { dir }); logs.success('hello succes'); logs.warning('hello fail');

我写了一个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值来验证颜色