El súper poder de console log 🔥 JavaScript

Seamos honestos, todos quienes hemos programado alguna vez con JavaScript conocemos al famoso console.log(...).

Este método imprime datos sobre la consola de desarrollo. Y es muy útil para tomar notas, verificar el estado de nuestras variables, hacer debugging, y probar nuestro proyecto.

Si ejecutas console.log(console), verás que hay mucho más en el objeto console además del método log que todos conocemos.

Este artículo incluye consejos útiles para llevar tu experiencia de logging al siguiente nivel!

Tables

El método console.table() imprime objetos (y arreglos) como tablas con formato.

console.table({
  'Timestamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Navegador': navigator['appCodeName'],
  'Idioma': navigator['language'],
});

Captura mostrando el resultado de usar console.table:

Groups

Puedes agrupar instrucciones en secciones que se pueden colapsar, usando el método console.group().

• Opcionalmente puedes asignar a cada grupo un título, pasando un string como argumento.
• Los grupos pueden expandirse y colapsarse.
• Si deseas agregar un grupo colapsado por defecto, puedes hacerlo usando groupCollapsed.
• También es posible anidar sub-grupos dentro de grupos, sólo recuerda finalizar cada grupo con groupEnd.

Este es un ejemplo de un grupo abierto que contiene a un grupo coalpsado (por defecto) en su interior:

console.group('Información de la URL');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Datos adicionales');
    console.log('Timestamp', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Navegador', navigator['appCodeName']);
    console.log('Idioma', navigator['language']);
  console.groupEnd();
console.groupEnd();

Resultado de ejecutar el console.group y groupCollapsed del ejemplo anterior:

Styled Logs

Es posible aplicar estilos CSS básicos, como dar color, asignar fuentes, y modificar el tamaño del texto.

Ten en cuenta que el resultado puede variar entre un navegador y otro.

Por ejemplo, prueba lo siguiente:

console.log(
  '%cHola mundo!',
  'color: #f709bb; font-style: italic; text-decoration: underline; font-size: 1.5em;'
);

Deberías obtener el siguiente resultado:

¿Qué te parece?

Hay muchas más cosas que puedes hacer!

Como cambiar el estilo del texto, agregar un color de fondo, algunas sombras, y bordes:

console.log('%cAprende con Programación y más 🔥', 'color: #1cfff9; background: #bd4147; font-size: 1.3em; padding: 0.25em 0.5em; margin: 1em; font-family: Helvetica; border: 2px solid white; border-radius: 0.6em; font-weight: bold; text-shadow: 1px 1px 1px #000121; font-style: italic;');

Aquí hay un ejemplo similar, que podría usarse en un dashboard, agregando notas para el usuario o desarrolladores:

console.info(
    `\n%c⚠️ Warning ⚠️%c \nAún no te has inscrito al curso de JavaScript :o \n\n%cCon una suscripción puedes acceder a todos los cursos! Y recibir toda la ayuda que necesitas con tus dudas y preguntas 🙂`,
    "color:#ceb73f; background: #ceb73f33; font-size:1.5rem; padding:0.15rem; margin: 1rem auto; font-family: Rockwell, Tahoma, 'Trebuchet MS', Helvetica; border: 2px solid #ceb73f; border-radius: 4px; font-weight: bold; text-shadow: 1px 1px 1px #000000bf;",
    'font-weight: bold; font-size: 1rem;color: #ceb73f;',
    "color: #ceb73f; font-size: 0.75rem; font-family: Tahoma, 'Trebuchet MS', Helvetica;",
  );

Time

Otra técnica muy común al hacer debugging es medir los tiempos de ejecución.

Es decir, hacer un seguimiento de cuánto tiempo tarda una operación en ejecutarse.

• Esto puede lograrse fácilmente iniciando un timer con console.time().
• La idea es pasar un label que identifique al timer.
• Y al finalizar la operación, usar console.timeEnd(), pasando el mismo label.

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

Nota: También es posible agregar marcadores, para operaciones que llevan mucho tiempo, usando console.timeLog().

Assert

¿Quieres imprimir un mensaje en la consola si un error ocurre?

¿O si una condición es verdadera o falsa?

Esto puede hacerse usando console.assert(), que no mostrará nada por consola a menos que el primer argumento sea false.

• Entonces el primer argumento es un boolean,
• seguido de 0 o más datos adicionales que puedes mostrar si lo deseas,
• y el último argumento el mensaje a imprimir.

Por ejemplo, console.assert(false, 'Value was false') imprimirá el mensaje, dado que el primer argumento se evalúa como false.

const errorMsg = 'El número no es par.';

for (let num = 2; num <= 5; num++) {
  console.log(`Evaluando número ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

Count

¿Alguna vez que te has encontrado incrementando manualmente un número al hacer logging?

El método console.count() es útil para hacer un seguimiento de cuántas veces algo es ejecutado, o cuantas veces se ingresó a un bloque de código.

• Opcionalmente puedes asociar un label al contador,
• de modo que puedas gestionar múltiples contadores,
• y tener un resultado mucho más claro.

Los contadores siempre empiezan en 1.

Puedes resetear un contador en cualquier momento usando console.countReset().

El siguiente ejemplo incrementa el contador por cada número encontrado en el arreglo, de modo que el valor final será 8.

const numbers = [1, 2, 3, 30, 69, 120, 240, 420];

numbers.forEach((name) => {
  console.count();
});

Aquí un ejemplo más completo usando labels para los contadores:

const names = ['Juan', 'Carlos', 'Val', 'Jes', 'Mariana'];

names.forEach(name => {
  if (name.length <= 3) console.count('name-muy-corto');
  else console.count('name-valido');
});

Y el resultado es:

Uso avanzado:

Si en vez de pasar un label, usas un valor como argumento, entonces se creará un contador por cada valor encontrado.

Por ejemplo:

console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2

Trace

En JavaScript (y en realidad, al programar en general) muchas veces trabajamos con métodos que invocan a otros métodos.

Podemos ubicar y usar console.trace() para imprimir el stacktrace, es decir, los métodos que han sido invocados al momento de la ejecución.

function iniciarSesion() {
  function verificarCredenciales() {
    console.trace();
  }
  verificarCredenciales();
}

iniciarSesion();

Opcionalmente también puedes pasar datos como argumentos, para que se impriman junto al stacktrace.

Dir

Si tienes un gran gran objeto JavaScript que quieres mostrar por consola, el método log no será suficiente ya que dificultará la lectura.

Sin embargo el método console.dir() te ayudará a imprimir el objeto en un formato muy conveniente.

Este es un ejemplo del resultado al usar el estilo directorio:

const programmingLanguages = {
  PHP: {
    type: 'Interpretado',
    typing: 'Débilmente tipado',
    creator: 'Rasmus Lerdorf',
    createdAt: 1995,
    frameworks: ['Laravel', 'Symfony']
  },
  Python: {
    type: 'Interpretado',
    typing: 'Fuertemente tipado',
    creator: 'Guido van Rossum',
    createdAt: 1991
  },
  JavaScript: {
    type: 'Interpretado',
    typing: 'Débilmente tipado',
    creator: 'Brendan Eich',
    createdAt: 1995,
    frameworks: ['Vue', 'React']
  },
  Kotlin: {
    type: 'Compilado',
    typing: 'Fuertemente tipado',
    creator: 'JetBrains',
    createdAt: 2011
  }
};

console.dir(programmingLanguages);

Nota: También puedes imprimir XML o HTML de forma similar, usando console.dirxml().

Debug

Es muy posible que uses console.log en varios lugares, a lo largo de tu aplicación, como ayuda mientras desarrollas.

Si tu intención es que los usuarios no vean dichos mensajes, puedes lograr ello usando console.debug().

Éste método funciona de la misma forma que console.log, pero se omitirá por la mayoría de sistemas, y/o será desactivado en modo producción.

Log Levels

Seguro has notado que hay muchos filtros en la consola del navegador (info, warnings y error).

Estos te permiten cambiar la cantidad de detalles a mostrar en los mensajes de log.

Para aprovechar estos filtros, sólo reemplaza el método log por uno de los siguientes:

• console.info() - Mensajes informativos. Comúnmente incluyen una pequeña "i" y/o un fondo azul.
• console.warn() - Advertencias, errores que no son críticos. Comúnmente incluyen un símbolo de exclamación triangular y/o un fondo amarillo.
• console.error() - Errores que pueden afectar la funcionalidad. Comúnmente incluyen un símbolo de exclamación circular y/o un fondo rojo.

En Node.js los diferentes log levels se escriben sobre diferentes streams al ejecutar en producción.

Por ejemplo, error() escribe sobre stderr, mientras que log sobre stdout, pero durante el desarrollo, todos aparecerán en la consola como es usual.

Múltiples valores en Logs

La mayoría de funciones del objeto console aceptan múltiples argumentos.

Así, puedes agregar labels al resultado de este modo: console.log('User: ', user.name).

Pero un enfoque más conveniente para imprimir múltiples valores, con sus correspondientes labels, es hacer uso de object deconstructing.

Por ejemplo, si tienes 3 variables (x, y, z), puedes imprimir los 3 valores fácilmente, encerrándolos con llaves.

De este modo, cada nombre de variable y su valor, son mostrados: console.log({ x, y, z }).

Esta captura muestra la diferencia entre usar destructuring y no hacerlo:

Formatos para cadenas

Como dato curioso, ¿sabías que puedes imprimir logs al estilo del método printf del lenguaje C?

Aquí un ejemplo:

console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!

Por supuesto, también puedes usar template literals para conseguir un resultado similar.

Pero quería comentarte esto, ya que es muy curioso, sobretodo para desarrolladores que iniciamos con lenguajes como C o C++.

Clear

Finalmente, si estás interesado en unos logs en particular, y quieres deshacerte de todo lo que imprime una página luego de cargar, puedes usar console.clear().

Este método limpia todo el contenido de la consola, sin afectar el estado de las variables.

Los navegadores ya incorporan un botón para esto, al igual que un filtro de búsqueda. Pero siempre es bueno saber qué métodos tenemos disponibles, para un mayor control.

Métodos para navegadores

Cuando ejecutas código directamente sobre la consola del navegador, tienes acceso a métodos súper útiles para hacer debugging y testing.

Estos son posiblemente los más importantes:

• $() - Abreviación para Document.querySelector() (seleccionar elementos del DOM, al estilo de jQuery).
• $$() - Igual que el anterior, pero para selectAll (devuelve múltiples elementos, como arreglo).
• $_ - Devuelve el valor de la última expresión evaluada.
• $0 - Devuelve el último elemento del DOM recientemente seleccionado (en el inspector de elementos).
• $1...$4 También permite obtener elementos previamente seleccionados.
• $x() - Permite seleccionar elementos del DOM usando expresiones Xpath.
• keys() y values() - Abreviación para Object.getKeys(), y devuelve un arreglo de claves o valores a partir de objetos.
• copy() - Copia cosas al portapapeles.
• monitorEvents() - Informa cada vez que se detecta un evento determinado.

Nota:

Para algunos métodos comunes de console (como console.table()), no necesitas siquiera escribir console..

Por ejemplo, puedes ejecutar simplemente table().

Hay muchos más comandos que permiten abreviar métodos, aquí tienes la lista completa.

Ten cuidado. Estos sólo funcionan en la Developer Tools, y no funcionarán en tu código.

Aprende viendo

Si prefieres consumir contenido en formato de video, aquí tienes la presentación equivalente en YouTube 🙂

Nota rápida sobre buenas prácticas

• Define reglas de lint, para evitar que mensajes de log innecesarios se agreguen a tu rama principal.
• Escribe un wrapper para gestionar la lógica de logging. Así puedes gestionar mejor los logs que deseas imprimir según tu entorno, además de centralizar todo un mismo lugar (por ejemplo si se desea integrar con un servicio de 3ros).
• Nunca imprimas información sensible en logs. Los mensajes de consola en navegadores se pueden capturar fácilmente por las extensiones.
• Siempre usa los niveles adecuados de log (como info, warn, error) para facilitar el uso de filtros y desactivación de logs.
• Usa un formato consistente, de modo que tus logs puedan ser parseados fácilmente si se llega a necesitar.
• Escribe mensajes de log cortos pero significativos, y siempre en inglés.
• Incluye información que dé contexto al imprimir logs.
• No te excedas, solo imprime logs relevantes.

Referencias

Como puedes ver, escribir logs sobre la consola es más flexible y entretenido y de lo que pensabas!

Para más información, puedes consultar los siguientes enlaces:

• Fun with console.log() - Artículo original que inspiró a esta publicación (traducción no literal + ligeros cambios).
• MDN Docs - Documentación de Mozilla respecto al objeto console.
• Chrome DevTools Docs - Documentación de Chrome respecto a Console API.

# javascript