Change messaggio console.log colore

Question

C'è un modo per fare qualcosa di simile:

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

in Chrome/Safari o Firefox?

Answer 1

Questo funziona:

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

Answer 2

fatto di questo e il suo stato utile:

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

Usa:

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 

Answer 3

È con il seguente frammento è possibile utilizzare il comando console.log come desiderato!

• Chrome ✔️
• Firefox ✔️
• Safari ✔️
• Opera (chi se ne frega ...)
• IE (indovinate un po '...)

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

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

O

https://jsfiddle.net/mL88u3n9/

Answer 4

Ispirato dalla risposta di Jaden. Ha fatto una piccola funzione di registro.

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

prova

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

What it looks like

Answer 5

TUTTI attualmente dato risposte causerà importante problema di debug - il numero di riga riportato l'output del registro sarà sempre corrispondere alla linea dove il costume la funzione di registro in definitiva richiama il nativo

colore ING è realizzabile con l'aggiunta %c sull'inizio del primo parametro e regole CSS semplici come secondo parametro di console.log:

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

e il corretto involucro di registrazione si potrebbe trovare in questa risposta

A proper wrapper for console.log with correct line number?