Console Api

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:

Chrome-console-api

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.

Del mismo modo, es importante tener en cuenta que estos mensajes que mostramos en la consola del navegador pueden ser útiles a la hora del desarrollo, pero es altamente recomendable eliminarlos o “anular” la función console en producción, ya que podemos estar empeorando el rendimiento del navegador (Por ejemplo, si almacenamos objetos, arrays, etctétera para verlos en la consola, estos quedarán residentes en memoria).

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

});

console.time_

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:

console.profile

En la pestaña Profiler de IE:

console.profile-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!