Debug con console.log
La herramienta de debug más simple y efectiva
⏱ Estim. ~5 min
01 · Leer
Existen herramientas de debug elegantes con breakpoints, watch expressions y ejecución paso a paso. Las vas a aprender más adelante. Pero la herramienta que más vas a usar, incluso siendo ingeniero senior, es el humilde console.log().
La idea es absurdamente simple: imprime cosas para ver qué está pasando de verdad. Cuando tu código no se comporta como esperabas, la forma más rápida de entender por qué es loguear los valores en cada paso y comparar lo que esperabas con lo que realmente pasó.
No es glamoroso. No es refinado. Pero funciona y es rápido.
💡 Imagínalo asíDebuggear con console.log es como poner cámaras de rastreo en un bosque. No puedes mirar cada árbol todo el tiempo, pero puedes poner cámaras en puntos clave para ver qué pasa por ahí. Cuando aparece algo inesperado, sabes exactamente dónde mirar.
02 · Leer
Tienes una app de tienda con un bug. La función getAffordableElectronics debería devolver productos electrónicos dentro de cierto precio y en stock. Pero está devolviendo los caros y los agotados. Vamos a investigar.
03 · Práctica de terminal
Primero lee el log de output para ver qué está produciendo la función en realidad vs. lo esperado.
(Esta sección es interactiva — activa JavaScript para usarla.)
04 · Práctica de terminal
Ahora lee el código y sigue la lógica. Mira los pasos de filtrado — uno de ellos tiene un bug sutil de operador.
(Esta sección es interactiva — activa JavaScript para usarla.)
05 · Ejemplo de código
Así se vería si agregaras logs de debug en cada paso. Compara los resultados intermedios para rastrear dónde se rompe.
Con logs de debug
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
Con logs en cada paso, el bug salta a la vista: después del filtro de precio, ves que los productos caros sobreviven en lugar de los baratos. El > debería ser <. Sin logs podrías pasar mucho tiempo adivinando — con logs lo encuentras en segundos.
06 · Leer
Loguear de forma estratégica es un arte. No metas logs por todos lados — ponlos donde se transforman los datos o donde algo podría salir mal.
Puntos clave
- Loguea al inicio de la función (¿se llamó? ¿con qué?)
- Loguea antes y después de las transformaciones (¿qué cambió?)
- Etiqueta cada log: console.log('paso 3 - data:', data)
- Borra los logs de debug antes de hacer commit
07 · Completar
Cuando debuggees con console.log, siempre agrega una _____ para saber qué log es cuál.
08 · Quiz
¿Por qué cada console.log debería tener una etiqueta?
- Para que el programa corra más rápido
- Para que puedas distinguir qué log produce qué output
- JavaScript exige que console.log tenga una etiqueta
- Solo el código de producción necesita etiquetas
Otras lecciones de este capítulo
⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.
※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.