JavaScript控制台中的颜色

Check this out:

Animation in console, plus 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/

you can paste ASCII in each frame to watch an ASCII animation

from Chrome 60, they removed the facility of blue text color while writing console.info and does many much changes in console API.

if you write a string literal in the es6 pattern, using the backticks `` as the identifier (called as template string ) in console.log() then below way can colorize the console output.

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

Google has documented this https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css.

The CSS format specifier allows you to customize the display in the console. Start the string with the specifier and give the style you wish to apply as the second parameter.

One example:

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

我知道现在回答有点晚了，但是由于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);
}

输出：

---

默认颜色是黑色，在这种情况下，您不必传递任何关键字作为参数。在其他情况下，您应该传递success, error, warning, or info关键字以获得期望的结果。

这是工作的JSFiddle。在浏览器的控制台中查看输出。

这个库很棒：

https://github.com/adamschwartz/log

使用Markdown记录日志消息。

您可以使用自定义样式表为调试器着色。C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\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;
}