Aprende a personalizar la función console.log de la consola en javascript, cambie el estilo de sus mensajes y haga que su biblioteca sea más interesante.

Google Chrome y Mozilla Firefox le permiten personalizar los mensajes proporcionados en la consola con el método console.log . Pero, ¿para qué puede ser útil esto? Bueno, no puedo darte una respuesta correcta, pero creo que la usarás para hacer que tus mensajes de depuración se vean más geniales.

Personalización

Para personalizar con css usaremos el identificador % c [caracteres] para habilitar esta característica en la cadena del primer parámetro, el segundo parámetro será la cadena css que se aplicará al mensaje, por ejemplo:

console.log('%cThe library says : you rocks !', 'background: #005454; color: #BFF8F8');

El código anterior debería salir algo como: 

CSS Console.log

Incluso puede combinar y personalizar con CSS diferentes cadenas dentro de un solo mensaje, el identificador% c ayuda a la consola a diferenciar una cadena de otra:

%cThis is the first block and %cHere begins the second block and %cHere the third

Toda la cadena debe estar encapsulada en el primer parámetro de la función console.log, luego los otros parámetros respectivamente con una cadena css, por ejemplo:

console.log("%cString1 "+"%cString2","color:blue;","color:orange;");

El código anterior debería salir algo como:

Customize 2

Versiones anteriores de Chrome

En Google Chrome y Firefox (versiones anteriores -32) esta función no está disponible, sin embargo, existen funciones de consola predeterminadas que ya vienen personalizadas:

console.info("Important information"); // muestra un círculo azul con una i antes de la cadena
console.warn("Warning, don't do that"); // muestra un triángulo blanco (símbolo de advertencia) con un carácter de exclamación

Y debería verse así:

Default console warning and info

Logra algo más asombroso

Aunque usar simplemente css para personalizar un mensaje de registro es bastante impresionante, ¡hay algo más impresionante que eso! Personalice sus registros con Markup, sin embargo  esta función se logra con una biblioteca.

La biblioteca es Log  y puede ver una demostración funcional aquí . Luego, podrás insertar el marcado ( lea más sobre el marcado aquí ) como primer parámetro de la función de registro:

log('this is *italic string*'); //salida de cadena en cursiva con estilo en cursiva
log('this is [c="color: red"]red[c] and this is [c="color: blue"]blue[c]');

Log


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores