JavaScript控制台的颜色

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

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

当前回答

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

2019-06-11 19:54:19

其他回答

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

2015-06-09 03:43:39

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

输出:

2022-01-25 16:31:47

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

2011-09-21 19:39:02

默认情况下，很少有内置的控制台方法来显示警告、错误和正常控制台以及特定的图标和文本颜色。

console.log(“console.log”); console.warn(“console.warn”); console.error(“console.error”);

但如果您仍然想应用自己的样式，您可以使用%c与消息和CSS样式规则作为第二个参数。

Console.log ('%cconsole.log'， 'color:绿色;'); console.warn(“% cconsole。警告'，'颜色:绿色;'); console.error(“% cconsole。错误'，'颜色:绿色;');

注意:在运行上述代码段时，请在浏览器控制台中检查结果，而不是代码段结果。

2022-06-06 07:26:34