看看这个:

控制台动画，加上CSS

(function() {
  var frame = 0;
  var frames = [
    "This",
    "is",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!"
  ];
  var showNext = () => {
    console.clear();
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    console.log(
      `%c ${frames[frame]}`,
      "background: red; color: white; font-size: 25px; padding: 3px 40%;"
    );
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    setTimeout(
      showNext,
      frames[frame] === "SPARTA!" || frames[frame] === " " ? 100 : 1500
    );
    // next frame and loop
    frame++;
    if (frame >= frames.length) {
      frame = 0;
    }
  };
  showNext();
})();

https://jsfiddle.net/a8y3jhfL/

你可以在每一帧中粘贴ASCII来观看ASCII动画

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

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

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

看看这个:

控制台动画，加上CSS

(function() {
  var frame = 0;
  var frames = [
    "This",
    "is",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!",
    " ",
    "SPARTA!"
  ];
  var showNext = () => {
    console.clear();
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    console.log(
      `%c ${frames[frame]}`,
      "background: red; color: white; font-size: 25px; padding: 3px 40%;"
    );
    console.log(
      `%c `,
      "background: red; color: white; font-size: 15px; padding: 3px 41%;"
    );
    setTimeout(
      showNext,
      frames[frame] === "SPARTA!" || frames[frame] === " " ? 100 : 1500
    );
    // next frame and loop
    frame++;
    if (frame >= frames.length) {
      frame = 0;
    }
  };
  showNext();
})();

https://jsfiddle.net/a8y3jhfL/

你可以在每一帧中粘贴ASCII来观看ASCII动画

您可以使用自定义样式表为调试器着色。你可以把这段代码放在C:\Documents and Settings<用户名>\Local Settings\Application Data\谷歌\Chrome\用户数据\Default\用户样式表\Custom.css(如果你在WinXP中)，但是目录因操作系统不同而不同。

.console-error-level .console-message-text{
    color: red;
}

.console-warning-level .console-message-text {
    color: orange;
}

.console-log-level .console-message-text {
    color:green;
}

选项1

// log-css.js v2
const log = console.log.bind()
const css = (text, options) => {
    let cssOptions = ''
    for (let prop in options) {
        const value = options[prop]
        prop = camelCaseToDashCase(prop)
        cssOptions += `${prop}: ${value}; `
    }
    return [`%c${text}`, cssOptions.trim()]

    function camelCaseToDashCase(value) {
        return value.replace(/[A-Z]/g, matched => `-${matched.toLowerCase()}`)
    }
}

例子:

log(...css('Example =P', {
    backgroundColor: 'blue',
    color: 'white',
    // fontFamily: 'Consolas',
    fontSize: '25px',
    fontWeight: '700',
    // lineHeight: '25px',
    padding: '7px 7px'
}))

选项2

我现在创建log-css.js https://codepen.io/luis7lobo9b/pen/QWyobwY

// log-css.js v1
const log = console.log.bind();
const css = function(item, color = '#fff', background = 'none', fontSize = '12px', fontWeight = 700, fontFamily) {
    return ['%c ' + item + ' ', 'color:' + color + ';background:' + background + ';font-size:' + fontSize + ';font-weight:' + fontWeight + (fontFamily ? ';font-family:' + fontFamily : '')];
};

例子:

log(...css('Lorem ipsum dolor sit amet, consectetur adipisicing elit.', 'rebeccapurple', '#000', '14px'));