Muchos de nosotros ya hemos trabajado con console para tareas de debug (mucho más recomendable que utilizar alert ;)). El uso más común de esta Api es el de mostrar mensajes, en la consola de las herramientas de desarrolladores de los navegadores web, de distintos tipos: console.log (Información), console.warn (Aviso), console.error (Error). Dependiendo del tipo, y del navegador, se mostrarán de forma distinta y podremos trabajar de una forma más cómoda en momentos de depuración.

En este post voy a comentar varias posibilidades de las que podemos beneficiarnos, en unos navegadores más que en otros, y que apenas he visto que se utilicen.

Formateo de mensajes

console.log, console.warn y console.error nos permiten no sólo mostrar un mensaje sino que además nos permiten formatear la información, dependiendo del tipo de mensaje que queramos mostrar:

%s

Se utiliza para el formateo de strings

%d o %i

Especifico para los números enteros

%f

Números con decimales

%o

Formatea elementos del DOM

%O

Nos permite mostrar objetos en la consola, con la posibilidad de desplegar sus propiedades

%c

Nos da la posibilidad de mostrar mensajes con estilos

En el siguiente código podemos ver un ejemplo con cada uno de los casos anteriores:

//console.log, console.error, console.warn --> Show basic messages
var name = "Gis",
    age = 28,
    change = 2.50,
    myObject = { firstName: "Gisela", LastName: "Torres", Blog: "https://www.returngis.net" };
console.log("Hello %s!", name);
console.warn("I'm just %i years old", age);
console.log("That's the price: %f€", change);
console.log("%o", document.getElementById('domElement'));
console.log("%O", myObject);
console.log("%c Hello world!", "color:white;background-color:black;");

En el caso de Chrome podemos ver el resultado de todos los formatos arriba mencionados:

En Internet Explorer 10 y Firefox no están disponibles los formatos %o, %O y %c. En Opera podemos utilizar todos excepto %c y Chrome soporta todos ellos.

console.time

Otra de las grandes funcionalidades que tiene esta Api es console.time, la cual nos permite lanzar un temporizador para medir el tiempo entre determinadas acciones de una forma muy sencilla. Para utilizar esta funcionalidad podemos hacerlo de la siguiente manera:

//console.time --> Starts a timer with an associated label
document.getElementById("btnStartTimer").addEventListener("click", function () {
    console.time("timerTest");
    var array = new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = new Object();
    };
    console.timeEnd("timerTest");
});

Esta funcionalidad no está disponible en Internet Explorer.

console.profile

Este método nos permite lanzar la captura de la CPU. Este método se combina con console.profileEnd para parar dicha captura.

//console.profile --> starts a JavaScript CPU profile
document.getElementById("btnStartProfile").addEventListener("click", function () {
    console.profile("profileTest"); //label name
});
document.getElementById("btnStopProfile").addEventListener("click", function () {
    console.profileEnd();
});

Si nos fijamos en la parte de Profile podremos ver la captura con el nombre indicado en nuestro código:

En la pestaña Profiler de IE:

Ni Firefox ni Opera soportan todavía esta funcionalidad.

console.timeStamp

Por último, tenemos la posibilidad de añadir timestamps durante la grabación del comportamiento de una web. Particularmente es el único que no he usado, pero es posible ver más respecto en el siguiente enlace.

Espero que haya sido de utilidad.

¡Saludos!