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();