La consola del navegador: más allá de console.log()

Al desarrollar, o cuando hacemos el debug de una aplicación, abrimos el inspector del navegador, seleccionamos la consola y comenzamos a ver toda la información: fallos, monitorización de variables, etc.

Una de las formas más comunes de realizar este tipo de tarea es usar el comando console.log(). Pero la instancia console está llena de métodos que nos facilitan mucho más las cosas.

Comencemos por el conjunto de mensajes preformateados: console.log(), console.info(), console.debug(), console.warn() y console.error().

---

Mensajes preformateados

console.error()

Como el método lo indica, con él podemos destacar el mensaje como un error.

console.error("No se pudo conectar con la API");

Este comando y los demás son comunes en todos los navegadores, solo que cada uno presentará el mensaje con un diseño diferente.

En Chrome: el mensaje aparece sobre fondo rojo, con un icono de aspa y el stack trace plegado justo debajo, que podemos desplegar para ver desde qué línea y función se lanzó.

En Firefox: el fondo es igualmente rojizo, con el icono de error a la izquierda y un enlace directo al archivo y línea de origen en el margen derecho.

Además del color, console.error() tiene una ventaja real: registra automáticamente la traza de llamadas, así que sabemos de dónde viene el problema sin tener que buscarlo.

console.warn()

El punto intermedio entre el log normal y el error. Se muestra en amarillo/ámbar y también incluye la traza de llamadas. Es ideal para avisos que no rompen la aplicación pero conviene atender: métodos obsoletos, valores por defecto que se están aplicando, configuraciones incompletas.

console.warn("El parámetro 'legacyMode' está deprecado y se eliminará en la v3");

console.log() y console.debug()

No encontraremos mayores diferencias que el nivel. Ambos imprimen el mensaje sin ningún formato especial, pero debug se registra con un nivel de severidad inferior.

Esto importa por un motivo práctico: la consola tiene un filtro de niveles (Verbose, Info, Warnings, Errors en Chrome; Depuración, Información, Advertencias, Errores en Firefox). Los mensajes de console.debug() solo aparecen si activamos el nivel Verbose, que suele estar oculto por defecto.

La consecuencia es útil: si usamos console.debug() para nuestro ruido de desarrollo y console.log() para lo que de verdad queremos ver siempre, podemos limpiar la consola con un clic en lugar de borrar líneas de código.

console.info()

Funciona prácticamente igual que log, aunque en Firefox se muestra con un icono informativo. Su valor es más semántico que visual: deja claro al leer el código que ese mensaje es informativo y no un resto de depuración.

---

Formato de los mensajes

La consola acepta especificadores de formato al estilo printf:

console.log("Usuario %s tiene %d puntos", "Ana", 42);
console.log("Objeto: %o", miObjeto);   // representación DOM/objeto
console.log("JSON: %j", datos);

Pero el más divertido es %c, que aplica CSS al mensaje:

console.log(
  "%c¡Atención!",
  "color: white; background: #c0392b; padding: 4px 8px; border-radius: 3px; font-weight: bold;"
);

Es lo que usan empresas como Facebook para mostrar esa advertencia gigante en la consola sobre el self-XSS.

---

Agrupar mensajes

Cuando una función escupe diez líneas, la consola se vuelve ilegible. console.group() las anida bajo una etiqueta plegable:

console.group("Petición al servidor");
console.log("URL:", url);
console.log("Método:", metodo);
console.error("Estado: 500");
console.groupEnd();

Si preferimos que el grupo aparezca cerrado por defecto, usamos console.groupCollapsed(). Los grupos se pueden anidar unos dentro de otros.

---

console.table()

Probablemente el método más infravalorado de todos. Recibe un array de objetos y lo pinta como una tabla ordenable:

const usuarios = [
  { nombre: "Ana",  rol: "admin",  activo: true  },
  { nombre: "Luis", rol: "editor", activo: false },
  { nombre: "Marta", rol: "editor", activo: true }
];

console.table(usuarios);

Podemos incluso limitar las columnas que queremos ver:

console.table(usuarios, ["nombre", "rol"]);

Comparado con hacer console.log() de un array y tener que desplegar cada objeto uno a uno, la diferencia es abismal.

---

Medir tiempos

Para saber cuánto tarda realmente un bloque de código:

console.time("carga");
// ... operación costosa
console.timeLog("carga", "a mitad del proceso");
// ... más trabajo
console.timeEnd("carga");   // carga: 1243.55ms

La etiqueta es la que asocia el inicio con el fin, así que podemos tener varios cronómetros a la vez.

---

Contar ejecuciones

¿Cuántas veces se está llamando a esa función que sospechamos que se ejecuta de más?

function render() {
  console.count("render");
}

Cada llamada imprime render: 1, render: 2, render: 3… y console.countReset("render") vuelve a poner el contador a cero.

---

console.assert()

Imprime un error solo si la condición es falsa. Perfecto para validar suposiciones sin llenar el código de if:

console.assert(usuario.id, "El usuario no tiene ID asignado", usuario);

Si usuario.id existe, no pasa nada. Si no, aparece un error en rojo con el objeto adjunto.

---

console.dir() y console.trace()

console.dir() muestra un objeto como una lista navegable de propiedades. La diferencia se nota sobre todo con elementos del DOM: console.log(elemento) pinta el HTML, mientras que console.dir(elemento) nos deja explorar todas sus propiedades JavaScript.

console.trace() imprime la pila de llamadas hasta ese punto. Cuando una función se ejecuta y no tenemos ni idea de quién la está llamando, esta es la respuesta.

---

Un par de recomendaciones finales

• Limpia antes de publicar. console.clear() sirve para vaciar la consola, pero lo importante es no dejar logs de depuración en producción. Un plugin como babel-plugin-transform-remove-console o la configuración de Terser lo hace por nosotros en el build.
• Usa el método adecuado en cada caso. No es solo estética: los niveles permiten filtrar, y error/warn/trace adjuntan la traza de llamadas automáticamente.
• Ojo con el rendimiento. Imprimir dentro de un bucle de miles de iteraciones ralentiza el navegador de forma notable. Para esos casos, mejor acumular y usar console.table() al final.

La consola es mucho más que un console.log() repetido. Dedicarle diez minutos a conocer estos métodos ahorra horas de depuración a ciegas.