Изменить цвет сообщения console.log - PullRequest
Новая
       10

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

31 голосов
/ 17 февраля 2012

Есть ли способ сделать что-то вроде: 

console.log("hello world", '#FF0000')

в Chrome / Safari или Firefox?

Ответы [ 5 ]

47 голосов
/ 27 мая 2012

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

function colorTrace(msg, color) {
    console.log("%c" + msg, "color:" + color + ";font-weight:bold;");
}
colorTrace("Test Me", "red");
30 голосов
/ 30 июля 2014

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

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
5 голосов
/ 23 сентября 2017

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

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

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

и соответствующей оболочки журнала, которую вы можете найти под этим ответом

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

1 голос
/ 02 июня 2017

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

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

Test 

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

Как это выглядит

0 голосов
/ 21 октября 2016

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

  • Хром ✔️
  • Firefox ✔️
  • Safari ✔️
  • Опера (кому какое дело ...)
  • IE (угадай, что ...) 

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

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

OR

https://jsfiddle.net/mL88u3n9/

...