En JavaScript existe un objeto llamado console con algunos métodos que permiten mostrar mensajes e información a la consola de depuración del navegador.

Es muy útil mientras desarrollas una aplicación porque permite mostrar mensajes en puntos clave para depurar el código o entender su comportamiento.

Uno de los métodos más usados es console.log. Si ejecutas este código verás el objeto impreso en la consola del navegador:

const usuario = { nombre: "Michael", edad: 30, activo: true };
console.log("Información del usuario:", usuario);

La salida en la consola será algo como:

Información del usuario: { nombre: "Michael", edad: 30, activo: true }

Otros métodos de logging en la consola

Mientras console.log sirve para imprimir mensajes generales, existen otros métodos para mostrar diferentes niveles de logging:

• console.info(): Similar a console.log(), pero semánticamente usado para información adicional.
• console.debug(): Usado para mensajes de depuración (puede no mostrarse en algunas configuraciones de consola).
• console.warn(): Muestra advertencias con un icono amarillo en la consola.
• console.error(): Muestra errores con un icono rojo en la consola.

Ejemplo:

console.info("Este es un mensaje informativo");
console.debug("Mensaje para depuración");
console.warn("¡Cuidado! Esto es una advertencia");
console.error("Se ha producido un error");

Usar distintos niveles de mensaje sirve para poder filtrarlos y además, cada uno se muestra con distintos colores y formatos en la consola. Si no ves alguno de ellos asegúrate de que está incluido en los filtros de la consola.

Personalización de mensajes en la consola

Es posible añadir colores y estilos a los mensajes utilizando %c en console.log.

console.log("%cEste es un mensaje con estilo", "color: blue; font-weight: bold; background-color: yellow; padding: 4px;");

También se pueden imprimir ASCII art para hacer los mensajes más llamativos.

console.log(`
╦ ╦╔═╗╔╗   ╔╦╗╦ ╦╔╦╗╔═╗╦═╗╦╔═╗╦  ╔═╗╔═╗
║║║║╣ ╠╩╗   ║ ║ ║ ║ ║ ║╠╦╝║╠═╣║  ║╣ ╚═╗
╚╩╝╚═╝╚═╝   ╩ ╚═╝ ╩ ╚═╝╩╚═╩╩ ╩╩═╝╚═╝╚═╝
`);

Sustitución en cadenas de texto

Podemos insertar valores dinámicos en mensajes de log usando los siguientes formatos:

• %s - Sustituye por una cadena de texto.
• %i o %d - Sustituye por un número entero.
• %f - Sustituye por un número decimal.
• %o o %O - Sustituye por un objeto.

Ejemplo:

console.log("El usuario %s tiene %d años", "Michael", 25);
console.log("El objeto es: %o", { id: 1, nombre: "Árbol" });

Otros métodos

time y timeEnd

Se pueden medir tiempos de ejecución usando console.time() y console.timeEnd():

console.time("Tiempo de ejecución");
for (let i = 0; i < 1000000; i++) {} // Simulación de tarea pesada
console.timeEnd("Tiempo de ejecución");

Mostrar resultados en formato tabla

Si queremos imprimir objetos o arrays de manera estructurada, console.table() es una excelente opción:

const usuarios = [
  { id: 1, nombre: "Jess", edad: 28 },
  { id: 2, nombre: "Michael", edad: 35 },
  { id: 3, nombre: "John", edad: 22 }
];
console.table(usuarios);

Limpiar la consola

Para borrar la consola, podemos usar console.clear():

console.clear();

Resumen

console.log es el método más usado pero también hemos visto otros comandos como info(), debug(), warn() y error(). Estos métodos ayudan a hacer debugging y mejorar la visibilidad de la información en JavaScript.

También hemos visto como formatear mensajes y diferentes tipos de objetos que podemos formatear como el método table().