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

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


当前回答

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

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

其他回答

更新:

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

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

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

是的,只要在你的消息和风格后面加上%c符号。

console.log('%c Hello World','color:red;border:1px solid dodgerblue');

如果您正在使用节点,并希望在终端中为控制台着色,那么您可以使用转义序列,如

console.log('\x1b[33m%s\x1b[0m', 'hi!') 

将控制台颜色调成黄色,否则你可以用粉笔一样的库来给控制台上色吗

const chalk = require('chalk') 
console.log(chalk.yellow('hi!')) 

如果你想给你的终端控制台上色,那么你可以使用npm包粉笔

npm i chalk

我最近想解决一个类似的问题,构造了一个小函数,只对我关心的关键字进行着色,这些关键字很容易通过周围的花括号{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语句,以允许根据不同的原因使用多种样式