Console en JavaScript
Brandon M. · 27 de marzo de 2026
Introducción
Es una objeto de JavaScript que nos permite imprimir en consola mensajes que queramos con diversas variantes, para ver estos mensajes es tan fácil como abrir la consola del navegador donde este corriendo tu código.
console.log()
Esta es la mas utilizada, y básicamente nos permite imprimir en la consola mensajes, de todo tipo, por ejemplo
console.log('Ejemplo de console.log: tqm perrito panzón');Salida
console.error()
Es lo mismo pero en rojo, se usa como lo dice el nombre para mostrar errores en la consola.
Uso típico:
- errores de red
- excepciones
- validaciones
console.error('Ejemplo de console.error: Ya no tqm perrito panzón');
//Esto es un error siempre voy a querer al perrito panzónSalida
console.info()
Pues todos estos métodos nos permiten mostrar información en la consola del navegador, este se usa para mostrar información en general.
console.info('Ejemplo de console.info: El perrito panzón esta bien bonito'); Salida
console.warn()
Adivina para que se usa paps? obviamente para advertencias a diferencia de los otros este lo pinta de amarillo así bien amarrillo patito.
console.warn('Ejemplo de console.warn: Cuidado con el perrito panzón a veces muerde'); Salida
console.group()
Oki doki aquí nos sirve para organizar mas nuestros mensajes en consola, básicamente los agrupa y ya, se pone a partir de donde quieres ver los mensajes agrupados.
console.group('Ejemplo de console.group: Tu y tu grupito');
console.log('Ejemplo de console.log: tqm perrito panzón');
console.error('Ejemplo de console.error: Ya no tqm perrito panzón'); //Esto es un error siempre voy a querer al perrito panzón
console.info('Ejemplo de console.info: El perrito panzón esta bien bonito');
console.warn( 'Ejemplo de console.warn: Cuidado con el perrito panzón a veces muerde'); Salida
console.groupEnd()
Y que pasa si quiero agrupar solo ciertos mensajes en especifico? podría usar console.group(), si pero pa que? si existe End, que básicamente te agrupa los mensajes que tu quieras definiendo un inicio con group y definiendo el fin con End.
console.group('Ejemplo de console.group: Tu y tu grupito');
console.log('Ejemplo de console.log: tqm perrito panzón');
console.error('Ejemplo de console.error: Ya no tqm perrito panzón');
//Esto es un error siempre voy a querer al perrito panzón
console.groupEnd();
console.info('Ejemplo de console.info: El perrito panzón esta bien bonito');
console.warn( 'Ejemplo de console.warn: Cuidado con el perrito panzón a veces muerde'); Salida
console.groupCollapsed()
Es la misma cosa que el group pero pues en lugar de mostrarte la lista desplegada te la muestra colapsada.
console.groupCollapsed('Ejemplo de console.group: Tu y tu grupito colapsado');
console.log('Ejemplo de console.log: tqm perrito panzón');
console.error('Ejemplo de console.error: Ya no tqm perrito panzón');
//Esto es un error siempre voy a querer al perrito panzón
console.groupEnd();
console.info('Ejemplo de console.info: El perrito panzón esta bien bonito');
console.warn( 'Ejemplo de console.warn: Cuidado con el perrito panzón a veces muerde'); Salida
console.assert()
Este ta chido, nos ayuda a validar una condición, si es falsa muestra error y si es verdadera hace nada, como yo con el conocimiento de que actualmente vivimos en un clico impuesto de producción y consumismo hasta el día de nuestra muerte, pero aun así continuo con mi vida. Personalmente este me costo algo saber para que utilizarlo, el assert, el saber que vivimos para producir y consumir sistemáticamente es sencillo.
Un ejemplo que les doy seria si queremos validar que el dato de un usuario sea entre un rango o que un dato nunca sea null, pues podríamos validarlo con este console.
function perritoFeliz(estado_de_animo) {
console.assert(
estado_de_animo === 'Feliz',
'Ejemplo de console.assert: El perrito panzón esta Triste por que no esta Feliz',
);
}
perritoFeliz('Feliz');
perritoFeliz('Triste');Salida
La salida dependera de que le mande yo
perritoFeliz('Feliz'); = Nada ya que el perrito esta Feliz
perritoFeliz('Triste'); = Ejemplo de console.assert: El perrito panzón esta Triste por que no esta Feliz
Ojo estoy simplificando no sean mamones, pero básicamente si la palabra no es "Feliz" entonces se interpretara que el perrito esta triste, me cachan la idea?
Si yo mando Feliz
Si yo mando Triste o en este caso cualquier otra cosa hasta feliz por que no normalizamos el texto:
console.dir()
Ta chido este, nos ayuda a listar un objeto entero de una manera mas detallada que log, nos sirve pues pa eso, pa ver a detalle las propiedades del objeto xd
const perritoPanzon = {
nombre: 'Perro Panzón',
edad: 100000,
raza: 'Semidios',
color: 'Arcoiris',
estado_de_animo: 'Feliz',
};
console.dir(perritoPanzon);Salida
console.count()
Tss este sirve para saber cuantas veces se ejecuta cierta parte de nuestro código, para este ejemplo vamos ocupar integrar poquito HTML para un botón, igual dejo el snippet para ambos:
<button id="boton">Pulsar el boton</button>document.addEventListener('DOMContentLoaded', () => {
const boton = document.getElementById('boton');
boton.addEventListener('click', () => {
console.count(
'Ejemplo de console.count: el perrito panzón ha presionado el botón',
);
});
});Salida
console.table()
Carnal no manches literal dice table que esperas que haga? algo interesante que también permite es filtrar ciertas columnas.
const perritos = [
{
nombre: 'Perro Normal',
edad: 10,
raza: 'Normal',
color: 'Amarrillo',
estado_de_animo: 'Feliz',
},
{
nombre: 'Perro Panzón',
alias: 'El mesias',
edad: 100000,
raza: 'Semidios',
color: 'Arcoiris',
estado_de_animo: 'Feliz',
},
{
nombre: 'Perro de rancho',
edad: 8,
raza: 'De rancho',
color: 'Blanco',
estado_de_animo: 'Feliz',
},
];
console.table(perritos);
console.table(perritos, ['nombre', 'raza', 'estado_de_animo']);Oki doki, puse dos ejemplos, y ademas definí un array para este ejemplo llamado perritos
Si llamamos console.table(perritos); nos enlistara todas las propiedades que encuentre sin importar si algunos registros tengan esa columna vacía.
Pero si yo mando console.table(perritos, ['nombre', 'raza', 'estado_de_animo']); solo va a enlistar las columnas especificadas.
Ojo también funciona con arrays simple si yo enlisto mi objeto de
const perritoPanzon = {
nombre: 'Perro Panzón',
edad: 100000,
raza: 'Semidios',
color: 'Arcoiris',
estado_de_animo: 'Feliz',
};
console.table(perritoPanzon);Me va a enlistar todas las propiedades de mi array
console.time()
Nos sirve para medir el tiempo de ejecución de un pedazo de código, ojo el ejemplo que voy a poner esta un poco extenso, pero pónganle focus en la salida para que logren entender bien lo que hace.
const perritoPanzonGemeloTriste = {
nombre: 'Perro Panzón',
edad: 100000,
raza: 'Semidios',
color: 'Arcoiris',
estado_de_animo: 'Triste',
};
console.table(perritoPanzonGemeloTriste);
//Ejemplo de console.time usando perritos como array y el nombre del perrito
let felicidad = 0;
console.time(
'Cuanto tiempo tardamos en dar 10 caricias al perrito panzón gemelo triste para que se vuelva feliz',
);
for (let caricia = 1; caricia <= 10; caricia++) {
felicidad++;
// Cambia a Feliz después de X caricias
if (felicidad >= 6) {
perritoPanzonGemeloTriste.estado_de_animo = 'Feliz';
} else {
perritoPanzonGemeloTriste.estado_de_animo = 'Triste';
}
}
console.timeEnd(
'Cuanto tiempo tardamos en dar 10 caricias al perrito panzón gemelo triste para que se vuelva feliz',
);
console.table(perritoPanzonGemeloTriste);Va pues vámonos por partes, primero definimos otro objeto llamado perritoPanzonGemeloTriste, luego los imprimimos, después ejecutamos un for que simula 10 caricias para poner al perrito panzón gemelo en un estado de animo feliz, al finalizar las caricias verificamos que el perrito panzón gemelo este feliz.
Ojo, en si lo importante aquí es el for que esta dentro de time y timEnd lo que este ahí se va a medir cuanto tiempo tarde en ejecutarse, la salida de todo seria:
Dando como conclusión que tardamos en este ejemplo 0.005126953125 ms para dar 10 caricias, somos rápidos.
console.timeEnd()
We no voy a poner ejemplo aquí, ya lo usamos esta arriba xd, básicamente nos ayuda a definir el fin del bloque que queremos medir, si no lo ponemos seguirá contando sin mostrar nunca un resultado visible.
console.trace()
De momento este es el ultimo, esta bien chido, nos ayuda a saber como llegamos a cierta parte de nuestro código.
// Funcion para preparar las caricias al perrito
function prepararCaricias(perrito) {
darCaricia(perrito);
}
//Funcion para dar caricias al perrito
function darCaricia(perrito) {
console.trace(`console.trace: ${perrito.nombre} recibe una caricia.`);
}
// Llamada a la funcion prepararCaricias
prepararCaricias(perritoPanzonGemeloTriste);En este caso, hacemos el trace al momento que ejecutamos darCaricia, y en este ejemplo ejecutamos prepararCaricias que a su ves llama a darCaricia entonces de salida veríamos al como primero ejecutamos prepararCaricias y este ejecuto darCaricias en la linea respectiva
Conclusión
Bueno chavalones, como se dieron cuenta hay varios métodos con consolé, todos útiles para cosas distintas y pues para distintas preferencias, ojo, aun faltan algunos que pues no toque acá, pero en la bibliografía les dejo dos enlaces de consulta que les podrían ayudar aprender mas del tema, espero les resulte útil este articulo y si no pues la neta me vale verdura jeje, los tqm
Referencias
- La consola Javascript - Javascript en español. (s. f.). https://lenguajejs.com/javascript/introduccion/consola-de-javascript/
- W3Schools.com. (s. f.). https://www.w3schools.com/jsref/obj_console.asp