Curiosidades del objeto global console

Seguro que estás harto o harta de usar console.log, console.warn, etc, para ver mensajes por consola mientras desarrollas en JavaScript. Sin embargo, hay algunos métodos del objeto global console que quizás no conoces y pueden llegar a ser muy útiles. En este artículo vamos a ver algunos de los métodos más útiles.

console.assert

// Muestra un mensaje de error si no se cumple la condición que recibe:
console.assert(false, "Mensaje"); // "Assertion failed: Mensaje"

Uno de sus usos puede ser para controlados casos que sea muy raros que ocurran. Por ejemplo, tenemos una zona de código en la que pensemos que es imposible que llegue un array vacío. Y quizás el código falla en un punto difícil de depurar, pues si esperamos que siempre llegue un array con contenido, no nos cuesta dejar un assert en el código:

console.assert(enemies.length, "Nos hemos quedado sin enemigos");

console.clear

El nombre ya lo dice todo. Al igual que el comando clear en Linux, o cls en Windows, borra el contenido de la consola.

console.count

Cada vez que se ejecuta incrementa un contador que muestra en la consola. Se puede indicar un nombre para el contador.

console.count(); // default: 1
console.count(); // default: 2

console.count("label"); // label: 1
console.count("label"); // label: 2
console.count("label"); // label: 3

console.countReset("label");
console.count("label"); // label: 1

Se puede reiniciar la cuenta con console.countReset(), indicando el nombre del contador en el caso de que se quiera resetear uno nombreado.

console.dirxml

Seguro que ya has mostrado el contenido de objetos por consola, ya sea con console.dir() o usando el objeto como argumento en los métodos log, info, etc. Pero ¿recuerdas que ocurre cuando lo haces por ejemplo con un elemento HTML? Sí, normalmente veremos el objeto que representa el nodo XML en sí, en lugar de la estructura. Así que con este fin existe dirxml:

console.dir(document.body)

// Si imprimimos nodos XML directamente tenemos algo de este estilo:
// body
//   aLink: ""
//   accessKey: ""
//   ariaAtomic: null
//   ariaAutoComplete: null
//   ariaBusy: null
// ...

console.dirxml(document.body);
// En cambio, console.dirxml muestra una estructura por la que podemos navegar.
// <body>
//   <div id="root">
//     <div class="app"></div>
//   </div>
// </body>

console.time

Cuando quieras medir tiempos en tu aplicación, puedes jugar haciendo diferencias con objetos de tipo Date, pero hay una forma mucho más sencilla para hacerlo en JavaScript. Con time y timeEnd podremos ver el tiempo transcurrido entre las dos llamadas. Podemos llamarlo sin parámetros, o pasando un parámetro para darle un nombre el contador.

console.time("benchmark");

... // Operaciones cuyo tiempo queremos medir

console.timeEnd("benchmark"); // benchmark: 98.097ms

console.group

Puede que alguna vez hayas querido indentar los mensajes que muestras por consola. Para ello, en el objeto console tienes los métodos group y groupEnd. Con el primero incrementas un nivel la indentación y con el segundo lo quitas.

console.group("Inicio de la subida");
  console.log("Subiendo datos");
  console.log("Revisando datos");
  console.group("Comienzo del análisis");
    console.log("Revisando datos a fondo");
  console.groupEnd("Comienzo del análisis");
  console.log("Fin del análisis");
console.groupEnd("Comienzo del análisis");
console.log("Fin de la subida");

// Inicio de la subida
//   Subiendo datos
//   Revisando datos
//   Comienzo del análisis
//     Revisando datos a fondo
//   Fin del análisis
// Fin de la subida

Simbología

En cada sección habrás visto dos iconos que significan lo siguiente:

Se puede utilizar en el navegador. Lo que no quita que en node exista aunque no pinte nada.
Se puede utilizar en NodeJS.

Comparte este artículo con quien quieras