Dominando la cosola del navegador con JavaScript

Los desarrolladores JavaScript usamos la consola a diario para debugar nuestro código. Vamos a ver unas cuantas funciones que suelen pasar desapercibidas.

Seguramente la función más famosa es console.log(), aunque seguro que ya has utilizado alguna vez otras como console.error(), console.warn() o console.debug(). Vamos a ver unas cuantas funcionalidades que seguro que pueden ser útiles en algunas ocasiones.

Dar estilo a los mensajes

Gracias a la directiva %c podemos usar estilos CSS para dar formato al mensaje que se grabará en la consola. ¿La utilidad? Pues no mucha, destacar algún mensaje concreto quizás, pero... ¿Y lo bonito que queda? Mira:

console.log(
  "%c¡Estás en el blog DevZeppelin!",
  "background: #00ADB5; padding: 20px; color: #222831; font-size: 25px"
)

Agrupar mensajes

Podemos agrupar mensajes con las funciones console.group(), console.groupCollapsed() y console.groupEnd(). Los mensajes que dejemos en el log aparecerán en forma de menú desplegable. Lo haremos de esta forma:

// grupo de mensajes con menú desplegado por defecto
console.group("Grupo de mensajes 1")
console.log("Mensaje 1")
console.log("Mensaje 2")

console.group("Subgrupo de mensajes")
console.log("Subgrupo mensaje 1")
console.log("Subgrupo mensaje 2")
console.groupEnd()

console.log("Mensaje 3")
console.log("Mensaje 4")
console.groupEnd()

// grupo de mensajes con menú plegado por defecto
console.groupCollapsed("Mensajes para desplegar")
console.log("No me ves por defecto 1")
console.log("No me ves por defecto 2")
console.log("No me ves por defecto 3")
console.groupEnd()

El resultado en consola sería algo así:

¿Te imaginas haber sabido esto mientras estabas debugando varias funciones con diferentes bucles?

Validar algunos parámetros con Assertions

Con console.assert() puedes validar una expresión y mostrar un mensaje en la consola solo en caso de que falle la validación. Por ejemplo:

const ok = 5 < 10 // una validación que devuelve true
const ko = 5 > 10 // una validación que devuelve false

console.assert(ok, "Este mensaje no va a salir en la consola")
console.assert(ko, "La validación de 'ko' ha fallado, saldrá en la consola")

Mostrando datos en formato de tabla

Tenemos el método console.table() al cual le podemos pasar un objeto para ver sus propiedades en formato de tabla. Realmente es mucho más visual inspeccionar objetos de esta forma:

const objeto = {
  blog: "DevZeppelin Blog",
  creado: 2020,
  autor: "Pol",
  hechoConJS: true,
}

console.table(objeto)

El resultado sería este:

Consultar la Traza de la pila

¿Te va la programación funcional? ¿Te has perdido entre tanta función? Pues console.trace() te va a gustar. Si no sabes qué es la pila de JavaScript, puedes revisar mi artículo Destripando JavaScript - Parte 2 donde te lo explico.

Podemos ver una traza de la pila en un punto dado, muy útil para resolver bugs en unos minutos cuando de otro modo podría llevarnos horas.

const primeraFuncion = () => {
  segundaFuncion()
}

const segundaFuncion = () => {
  terceraFuncion()
}

const terceraFuncion = () => {
  console.trace()
}

primeraFuncion()

// la salida por consola nos mostraría esta información:

// terceraFuncion
// segundaFuncion
// primeraFuncion

Temporizadores

¿Estás optimizando un bucle y quieres ver el tiempo que tarda en ejecutarse? Puedes usar las funciones console.time() y console.timeEnd():

const bucleEjemplo = () => {
  console.time("bucleEjemplo")
  y = 0
  for (x = 0; x < 1000000; x += 1) {
    y += x
  }
  console.timeEnd("bucleEjemplo")
}

bucleEjemplo()

// bucleEjemplo: 18.9990234375 ms

¿Útil verdad? A veces tenemos la constumbre de usar solo el console.log(), pero la verdad es que tenemos a nuestra disposición muchas herramientas que nos hacen la vida más fácil, así que ¿por qué no usarlas?