Uso avanzado de console.log()

console.log() es una función en JavaScript que se utiliza para imprimir mensajes o valores en la consola del navegador web o en el entorno de desarrollo. Es una herramienta fundamental para depuración y aprendizaje, ya que permite a los desarrolladores observar el estado de las variables, el flujo del programa y detectar errores de forma más eficiente.  Los métodos de consola más comunes son:

1. console.log()  – Para la salida general de información de registro.
2. console.info()  – Registro informativo.
3. console.debug()  – Envía un mensaje a la consola con el nivel de registro de depuración.
4. console.warn()  – Envía un mensaje de advertencia.
5. console.error() – Envía un mensaje de error.

 

¿Para qué sirve console.log()?

1- Depuración de Código:

• Permite rastrear valores de variables en diferentes partes del código.
• Ayuda a identificar errores en la lógica del programa.

  const nombre = "Milton";
console.log("El nombre es:", nombre); // Output: El nombre es: Milton
 

2- Seguimiento del Flujo del Programa:

•  Puedes usarlo para comprobar qué partes del código se ejecutan y en qué orden.

function ejemplo() {
    console.log("Inicio de la función");
    // Código adicional
    console.log("Fin de la función");
}
ejemplo();
 

3- Exploración de Objetos y Datos:

•  Muestra estructuras completas como objetos o matrices para inspeccionar sus propiedades y valores.

const usuario = { nombre: "Milton", edad: 25, pais: "Nicaragua" };
console.log(usuario);

 4- Mensajes Informativos:

• Útil para mostrar mensajes personalizados o datos intermedios mientras desarrollas un programa.

5- Interacción Educativa:

• Es comúnmente utilizado por principiantes en JavaScript para aprender cómo funcionan las variables y las estructuras del lenguaje.
• console.count() Registra el número de veces que se ha llamado a esta línea con la etiqueta dada.
• console.dir() Muestra una lista interactiva de las propiedades del objeto JavaScript especificado.
• console.clear() Limpia la consola.

 console.log() es como un "traductor" del código al humano, facilitando la comprensión del comportamiento del programa en tiempo real. 

 

El uso avanzado de console.log() 

El uso avanzado de console.log() en JavaScript va más allá de simplemente imprimir mensajes en la consola. 

Sustituciones de cadenas

Al pasar una cadena a uno de los métodos del objeto de la consola (console) que acepta cadenas (como log()), puede usar estas cadenas de sustitución: 

• %s – string
• %i or %d – integer
• %o or %O – object
• %f – float

for (var i = 0; i <= 3; i++) {
    console.log(
		"Hola, %s. me llamastes hace %d hora.",
		"Milton",
		i + 1,
    );
} 

1- Formato Avanzado con Placeholders

•  Puedes usar placeholders como %s, %d y %o para formatear mensajes. 
• Ejemplo:  Hola, Milton. Tienes 25 años.

const name = 'Milton';
const age = 25;
console.log('Hola, %s. Tienes %d años.', name, age);

2- Estilizar Mensajes

•  La salida console.log('%c ') se puede diseñar en DevTools usando el especificador de formato CSS.
• Con el uso de estilos CSS puedes personalizar el texto de console.log:

console.log(
	"%c Este es un mensaje con estilo CSS",
	"color:white;background-color:brown;font-weight: bolder;font-style:italic",
);

  console.log('%c¡Texto estilizado!', 'color: blue; font-size: 20px; background: yellow; padding: 5px;');
 

3- Visualizar Objetos

•  Puedes inspeccionar objetos completos con console.dir():  Esto te permitirá expandir el objeto en la consola y explorar sus propiedades y métodos.

 const obj = { name: 'Milton', hobby: 'coding' };
console.dir(obj);
 

4- Agrupar Mensajes

• console.group() y console.groupEnd()
•  Usa console.group() y console.groupCollapsed() para agrupar mensajes relacionados. Esto crea un grupo con las entradas anidadas.

console.group('Detalles de Usuario');
console.log('Nombre: Milton');
console.log('Edad: 25');
console.groupEnd();

5- Medir Tiempos

•  Utiliza console.time() y console.timeEnd() para medir cuánto tarda un bloque de código:

 console.time('Cálculo');
let sum = 0;
for (let i = 0; i < 100000; i++) {
    sum += i;
}
console.timeEnd('Cálculo');

6- Depurar Condicionalmente: console.assert()

• Registra un mensaje y un seguimiento de la pila en la consola si el primer argumento es false.
• Usa console.assert() para imprimir solo si una condición es falsa:

 const isAdmin = false;
console.assert(isAdmin, 'El usuario no tiene privilegios de administrador');

7- Tablas

•  console.table() organiza datos en formato de tabla:

 const users = [
    { id: 1, name: 'Milton', country: 'Nicaragua' },
    { id: 2, name: 'Ana', country: 'México' }
];
console.table(users);
 

8-  Trazas de Pila

•  Usa console.trace() para ver cómo se llegó a un punto del código:

 function firstFunction() {
    secondFunction();
}
function secondFunction() {
    console.trace('Trazando llamada...');
}
firstFunction();
 

9- Filtrado con Niveles 

•  La consola soporta diferentes métodos para filtrar mensajes:
• console.log() (informativo)
• console.warn() (advertencias)
• console.error() (errores)
• console.info() (notas informativas)

console.error('¡Ha ocurrido un error grave!');
console.warn('Esto es una advertencia.');
console.info('Información de sistema cargada.');
 

10- Uso Combinado con Debugging 

• Puedes colocar múltiples logs estratégicamente para inspeccionar variables, flujos lógicos y estructuras durante la ejecución del programa. 
• Aquí tienes un ejemplo práctico donde usamos console.log() combinado con diferentes herramientas de depuración como console.time(), console.assert(), y trazas de pila con console.trace():
  

function processArray(arr) {
    console.group("Inicio de la función processArray");
    console.time("Duración del proceso"); // Inicia temporizador

    console.log("Entrada original:", arr); // Muestra el arreglo original

    // Asegúrate de que es un arreglo
    console.assert(Array.isArray(arr), "El argumento no es un arreglo");

    if (!Array.isArray(arr)) {
        console.error("¡Error! El argumento proporcionado no es un arreglo.");
        console.groupEnd();
        return; // Termina la función si no es un arreglo
    }

    // Simulando un proceso
    const processedArray = arr.map((item, index) => {
        console.log(`Procesando índice ${index}:`, item); // Log para cada elemento
        return item * 2; // Multiplica por 2 como parte del proceso
    });

    console.log("Resultado procesado:", processedArray);

    // Depuración con traza de pila
    console.trace("Fin del proceso principal");

    console.timeEnd("Duración del proceso"); // Muestra el tiempo tomado
    console.groupEnd(); // Fin del grupo
    return processedArray;
}

// Llamar a la función con datos correctos
const numbers = [1, 2, 3, 4, 5];
processArray(numbers);

// Llamar a la función con datos incorrectos para probar errores
processArray("No soy un arreglo");

¿Qué está pasando aquí?

1. console.group() y console.groupEnd(): Agrupa todos los mensajes de la función para organizarlos mejor en la consola.
2. console.time() y console.timeEnd(): Mide cuánto tiempo tarda en ejecutarse el proceso del arreglo.
3. console.assert(): Verifica si el argumento es un arreglo y lanza un error en la consola si no lo es.
4. console.trace(): Genera una traza de pila para identificar cómo se llegó a ese punto del código.
5. console.log(): Muestra datos intermedios y estados del proceso, como los valores del arreglo antes y después.
6. console.error(): Reporta errores importantes, en este caso, cuando el argumento no es un arreglo.

 

¿Cómo te beneficia?

Este uso combinado de las herramientas te permite:

1. Depurar: Detectar errores rápidamente.
2. Analizar: Ver cómo fluye el programa y qué partes del código están siendo ejecutadas.
3. Optimizar: Identificar procesos lentos con medición de tiempo.

Métodos principales del objeto console

Lista completa y breve descripción de las propiedades y métodos más comunes del objeto console en las herramientas para desarrolladores (web tools) de los navegadores. Estos te ayudan a depurar, medir el rendimiento, organizar información y más.

Métodos principales del objeto console:

1. console.log() Muestra mensajes generales en la consola. Es el método más utilizado.
2. console.info() Proporciona mensajes informativos (similar a log() pero con diferente estilo).
3. console.warn() Muestra advertencias en la consola, generalmente destacadas con color amarillo.
4. console.error() Muestra mensajes de error, destacados en rojo.
5. console.table() Despliega datos tabulares (arreglos u objetos) en forma de tabla.
6. console.dir() Muestra un objeto de forma interactiva, revelando su estructura y propiedades.
7. console.group() Agrupa mensajes relacionados en un bloque plegable en la consola.
8. console.groupCollapsed() Igual que group(), pero el grupo comienza colapsado.
9. console.groupEnd() Termina un grupo iniciado por group() o groupCollapsed().
10. console.assert() Muestra un mensaje de error si la condición proporcionada es falsa.
11. console.time() Inicia un temporizador con un identificador.
12. console.timeEnd() Finaliza un temporizador iniciado con time() y muestra la duración.
13. console.trace() Muestra una traza de pila que detalla el camino de ejecución del código.
14. console.clear() Limpia todos los mensajes de la consola.
15. console.count() Lleva un contador asociado a una etiqueta específica y lo muestra.
16. console.countReset() Resetea el contador asociado a una etiqueta específica.
17. console.timeLog() Muestra el tiempo transcurrido desde que se inició un temporizador con time() sin detenerlo.
18. console.debug() Similar a log(), pero puede estar oculto dependiendo de la configuración de la consola.
19. console.profile() (obsoleto en algunos navegadores) Inicia una sesión de perfilado de rendimiento.
20. console.profileEnd() (obsoleto en algunos navegadores) Finaliza la sesión de perfilado iniciada con profile().
21. console.memory (sólo en algunos navegadores) Proporciona información sobre el uso de memoria de la página actual.
22. console.dirxml() Muestra una representación del DOM en formato de árbol, útil para depurar estructuras HTML.

¿Cómo usarlos de forma avanzada?

Estos métodos se pueden combinar para organizar, medir y depurar código eficientemente. Por ejemplo:

• Agrupa logs relacionados (group).
• Mide el tiempo de ejecución (time y timeEnd).
• Muestra datos complejos (table, dir).

1. console.log() y Placeholders

Usa placeholders para simplificar registros formateados:

const user = { name: "Milton", age: 25, country: "Nicaragua" };
console.log("Usuario: %o", user); // %o muestra el objeto en un formato expandido
 

2. console.info(), console.warn() y console.error()

Diferentes niveles de mensajes según su importancia:

 console.info("Información: El sistema se está iniciando...");
console.warn("Advertencia: La memoria se está llenando.");
console.error("Error: No se pudo conectar a la base de datos.");

3. console.group(), console.groupCollapsed(), y console.groupEnd()

Organiza mensajes relacionados en grupos:

console.group("Cargando Datos del Usuario");
console.log("Obteniendo datos personales...");
console.log("Cargando historial...");
console.groupCollapsed("Detalles Internos");
console.log("Query SQL ejecutada.");
console.log("Tiempo de respuesta: 120ms.");
console.groupEnd(); // Termina grupo colapsado
console.groupEnd(); // Termina grupo principal
 

4. console.table()

Visualiza datos tabulares de manera estructurada:

const users = [
    { id: 1, name: "Milton", role: "Admin" },
    { id: 2, name: "Ana", role: "Editor" },
    { id: 3, name: "Luis", role: "Viewer" }
];
console.table(users);

5. console.time(), console.timeLog() y console.timeEnd()

Mide el rendimiento de un bloque de código:

 console.time("Carga Completa");
fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => {
        console.timeLog("Carga Completa", "Datos recibidos.");
        console.log(data);
        console.timeEnd("Carga Completa");
    });
 

6. console.assert()

Muestra errores si una condición no se cumple:

 const isAdmin = false;
console.assert(isAdmin, "El usuario no tiene privilegios de administrador.");
 

7. console.dir()

Inspecciona objetos complejos y elementos DOM:

const element = document.createElement("div");
element.id = "test";
element.className = "container";
console.dir(element); // Muestra las propiedades del elemento

8. console.clear()

Limpia toda la consola (útil para evitar desorden):

 console.clear();
console.log("Consola limpia y lista para nuevas tareas.");
 

9. console.trace()

Muestra una traza de pila para ver cómo se llegó a un punto del código:

 function firstFunction() {
    secondFunction();
}
function secondFunction() {
    console.trace("Trazando flujo...");
}
firstFunction();
 

10. console.count() y console.countReset()

Cuenta la cantidad de veces que se llama una etiqueta específica:

for (let i = 0; i < 5; i++) {
    console.count("Iteración del ciclo");
}
console.countReset("Iteración del ciclo");
 

11. console.memory (solo navegadores compatibles)

Consulta el estado de la memoria:

 if (console.memory) {
    console.log("Uso de memoria:", console.memory);
}

12. console.dirxml()

Visualiza el DOM en formato de árbol XML:

const domElement = document.body;
console.dirxml(domElement); // Muestra el árbol del DOM en la consola

Ejemplo Completo (Usando Múltiples Métodos):

console.group("Proceso Completo");
console.time("Duración Total");

console.log("Iniciando proceso...");
console.info("Cargando datos iniciales...");
console.warn("Espacio en disco limitado.");

console.group("Detalles de Usuario");
console.table([{ id: 1, name: "Milton", role: "Admin" }]);
console.groupEnd();

console.assert(true === false, "Algo salió mal.");

console.groupCollapsed("Consultas SQL");
console.log("SELECT * FROM users WHERE id = 1;");
console.groupEnd();

console.timeEnd("Duración Total");
console.groupEnd();