Изменить цвет сообщения console.log

Ответ 1

Это работает:

function colorTrace(msg, color) {
    console.log("%c" + msg, "color:" + color + ";font-weight:bold;");
}
colorTrace("Test Me", "red");

Ответ 2

Сделано это и было полезно:

function log(msg, color) {
    color = color || "black";
    bgc = "White";
    switch (color) {
        case "success":  color = "Green";      bgc = "LimeGreen";       break;
        case "info":     color = "DodgerBlue"; bgc = "Turquoise";       break;
        case "error":    color = "Red";        bgc = "Black";           break;
        case "start":    color = "OliveDrab";  bgc = "PaleGreen";       break;
        case "warning":  color = "Tomato";     bgc = "Black";           break;
        case "end":      color = "Orchid";     bgc = "MediumVioletRed"; break;
        default: color = color;
    }

    if (typeof msg == "object") {
        console.log(msg);
    } else if (typeof color == "object") {
        console.log("%c" + msg, "color: PowderBlue;font-weight:bold; background-color: RoyalBlue;");
        console.log(color);
    } else {
        console.log("%c" + msg, "color:" + color + ";font-weight:bold; background-color: " + bgc + ";");
    }
}

Использование:

log("hey"); // Will be black
log("Hows life?", "green"); // Will be green
log("I did it", "success"); // Styled so as to show how great of a success it was!
log("FAIL!!", "error"); // Red on black!
var someObject = {prop1: "a", prop2: "b", prop3: "c"};
log(someObject); // prints out object
log("someObject", someObject); // prints out "someObect" in blue followed by the someObject

Ответ 3

Вдохновленный Джаденом ответ. Сделал небольшую функцию журнала.

function log(msg, color) {

  var css = "",
  paint = { // default colors
    clr: "#212121",
    bgc: "#b0bec5"
  },
  colors = {
    error: {clr:"#ffebee", bgc:"#c62828"}, // red
    success: {clr: "#e8f5e9", bgc: "#2e7d32"}, // green
    warning: {clr: "#fff3e0", bgc: "#f4511e"}, // orange
    info: {clr: "#ede7f6", bgc: "#651fff"} // purple
  };

  // overriting default colors if color given
  if (colors.hasOwnProperty(color)){ paint.clr = colors[color].clr; paint.bgc = colors[color].bgc; }
  css = "color:" + paint.clr + ";font-weight:bold; background-color: " + paint.bgc + "; padding: 3px 6px; border-radius: 2px;";

  console.log("%c"+msg, css);
}

Тест

log("Default");
log("Error", "error");
log("Success", "success");
log("Warning", "warning");
log("Info", "info");

Что это похоже

Ответ 4

ВСЕ ответы, полученные в настоящее время, вызовут серьезную проблему отладки. Номер строки, сообщаемой в выводе журнала, всегда будет соответствовать строке, в которой пользовательская функция журнала в конечном счете вызывает собственный console.log

можно достигнуть добавлением %c в начале первого параметра и простых правил CSS в качестве второго параметра console.log:

console.log('%c' + $message, 'color:' + $color + ';background-color: #444; padding: 3px 7px; margin-left: -7px;');

и соответствующую обертку регистрации, которую вы можете найти в этом ответе

Правильная оболочка для console.log с правильным номером строки?

Ответ 5

У вас со следующим фрагментом вы можете использовать команду console.log, как вы пожелаете!

• Chrome ✔️
• Firefox ✔️
• Safari ✔️
• Опера (кто заботится...)
• IE (угадайте, что...)

(function () {
	$consoleLog = console.log;
  console.log = function ($message, $color) {
  	$consoleLog('%c' + $message, 'color:' + $color + ';font-weight:bold;');
  }
})();

console.log('test', 'green');