La Consola en JavaScript

La consola de JavaScript es una herramienta integrada en los navegadores web, ubicada dentro de las DevTools, que permite ejecutar fragmentos de código y visualizar resultados, advertencias, errores y mensajes informativos. Es ampliamente utilizada tanto para depuración como para pruebas rápidas durante el desarrollo.

Para abrir las DevTools, generalmente se utiliza un atajo de teclado (como F12 o Ctrl + Shift + I), y si se desea acceder directamente a la consola, se puede usar Ctrl + Shift + J.

Uso del método console.log()
Uno de los métodos más comunes en la consola es console.log(), el cual permite mostrar texto o valores. Por ejemplo:

console.log("Hola Mundo");
console.log(2 + 2);
console.log("Resultado:", 2 * 10);

Esto es útil para hacer seguimiento de valores y estados durante la ejecución de un programa. Algunos editores de código como VSCode permiten escribir log y autocompletar con console.log().

Mensajes según el tipo
Existen otros métodos útiles para mostrar distintos niveles de mensajes:

• console.debug() – Información detallada.
• console.info() – Mensajes informativos.
• console.warn() – Advertencias resaltadas.
• console.error() – Errores resaltados.

También se pueden filtrar los mensajes en la consola según su nivel de importancia.

Trazas y estilos
El método console.trace() permite ver la ruta que ha seguido la ejecución del código:

console.trace("Ruta de ejecución");

También es posible aplicar estilos CSS a los mensajes de consola:

console.log("%cMensaje con estilo", "color: white; background: indigo; padding: 4px;");

Limpieza y agrupación
Para limpiar la consola se puede usar console.clear(). Además, para organizar los mensajes, se pueden agrupar:

console.group("Datos del navegador");
console.log(navigator.userAgent);
console.groupEnd();

Mostrar datos en tabla
console.table() permite visualizar arreglos u objetos como tablas:

console.table([
  { nombre: "Ana", rol: "admin" },
  { nombre: "Luis", rol: "editor" }
]);

Asertos
console.assert() muestra un mensaje si la condición no se cumple:

console.assert(5 > 10, "5 no es mayor que 10");

Visualización de elementos HTML
console.log() muestra el elemento como HTML, mientras que console.dir() muestra el objeto como una estructura JavaScript:

console.log(document.body);
console.dir(document.body);

Benchmarks y rendimiento
Se pueden medir tiempos de ejecución con:

console.time("proceso");
// código a medir
console.timeEnd("proceso");

Y también se pueden contar ejecuciones:

console.count("contador");

Para analizar el rendimiento en profundidad se pueden usar console.profile() y console.profileEnd() junto a la pestaña de rendimiento en las DevTools.

Finalmente, insertar debugger en el código permitirá pausar la ejecución en ese punto y abrir el depurador del navegador para análisis detallado.