mensaje console.log

Question

¿Hay una manera de hacer algo como:

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

en Chrome/Safari o Firefox?

Answer 1

Esto funciona:

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

Answer 2

hecho de este y su resultado útil:

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

Uso:

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

Usted con el siguiente fragmento se puede utilizar el comando console.log ¡como deseabas!

• Chrome ✔️
• Firefox ✔️
• Safari ✔️
• Opera (a quién le importa ...)
• IE (supongo que lo que ...)

(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

Inspirado por la respuesta de Jaden. Hecho una pequeña función de 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); 
} 

prueba

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

What it looks like

Answer 5

TODOS respuestas Actualmente dados causará importante problema de depuración - el número de línea reportado en la salida del registro será siempre corresponden a la línea donde la costumbre función de registro en última instancia invoca al nativo console.log

color ING se puede lograr mediante la adición de %c en el comienzo del primer parámetro y reglas CSS simples como un segundo parámetro de console.log:

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

y la envoltura de registro adecuado se puede encontrar bajo esta respuesta

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