¿Antes de tocar código en un bug difcil, qué paso aumenta probabilidad de resolver bien?

Diagnóstico reproducible evita arreglos accidentales.

Debug en JavaScript: encuentra el bug exacto antes de tocar código

Aprende depuración profesional con breakpoints, trazas de consola y lectura de stack trace para corregir errores con método en lugar de adivinar.

¿Cuánto sabes de JavaScript?

📘 Teoría

Mentalidad de depuración: primero entender, luego corregir

Corregir sin diagnóstico es crear bugs nuevos.

Un bug casi siempre tiene patrón: datos inesperados, orden incorrecto o supuestos no válidos. Antes de editar código, hay que observar qué valores reales circulan.

Una estrategia efectiva es: reproducir error, capturar evidencia (logs/stack), acotar zona, arreglar y verificar regresión.

1) Reproducir

Haz que el bug aparezca de forma consistente.

Mismos datos
Mismos pasos
Mismo entorno

2) Observar

Registra estado antes de fallar.

console.log
breakpoints
watch variables

3) Aislar

Reduce el problema a la mínima parte posible.

Función concreta
Caso de entrada mínimo
Sin ruido externo

4) Verificar

Confirma que arreglaste causa, no síntoma.

Prueba caso original
Prueba caso borde
Revisa no romper otro flujo

Consola inteligente: logs que realmente ayudan

Un buen log responde una pregunta concreta.

No llenes la consola de ruido. Cada traza debería ayudarte a validar una hipótesis: valor esperado, tipo esperado o rama ejecutada.

Patrón recomendado: etiqueta + datos clave + contexto de fase. Así cuando leas 50 líneas, entiendes cronología enseguida.

Logs con contexto

function calcularTotal(items) {
  console.log('[calcularTotal] entrada:', items);

  let total = 0;

  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    console.log('[item]', i, item);

    if (typeof item.precio !== 'number') {
      console.warn('[item inválido]', item);
      continue;
    }

    total += item.precio;
  }

  console.log('[calcularTotal] salida:', total);
  return total;
}

Breakpoints y debugger: inspección en tiempo real

Cuando un log no basta, para la ejecución y mira dentro.

Un breakpoint te permite congelar la ejecución justo antes del error para inspeccionar variables, pila de llamadas y flujo paso a paso.

`debugger` en código provoca ese mismo punto de pausa si DevTools está abierto, útil para casos puntuales en desarrollo.

Step over: avanza línea sin entrar en función.
Step into: entra dentro de la función llamada.
Step out: termina función actual y vuelve al llamador.

Pausa intencional

function aplicarDescuento(precio, porcentaje) {
  debugger;
  const descuento = precio * (porcentaje / 100);
  return precio - descuento;
}

console.log(aplicarDescuento(200, 15));

Leer stack trace sin miedo

La traza de error te dice el camino que siguió el bug.

El stack trace lista funciones desde donde se lanzó el error hasta su origen. No empieces por la última línea: busca la primera referencia a tu código de negocio.

Cuando un error nace en datos inválidos, el stack te ayuda a localizar qué función asumió algo incorrecto.

Error controlado con contexto

function obtenerNombre(usuario) {
  if (!usuario || !usuario.nombre) {
    throw new Error('Usuario sin nombre');
  }
  return usuario.nombre.toUpperCase();
}

try {
  console.log(obtenerNombre({}));
} catch (error) {
  console.error('[fallo obtenerNombre]', error.message);
}

Antipatrones de depuración que debes evitar

No tapes errores: entiéndelos.

Antipatrón 1: comentar líneas al azar hasta que "funcione". Antipatrón 2: meter try/catch vacío solo para ocultar errores. Antipatrón 3: corregir síntoma sin testear casos borde.

Regla práctica: cada fix debe responder a una causa comprobada. Si no puedes explicar la causa, aún no has terminado de depurar.

1 Mentalidad de depuración: primero entender, luego corregir 2 Consola inteligente: logs que realmente ayudan 3 Breakpoints y debugger: inspección en tiempo real 4 Leer stack trace sin miedo 5 Antipatrones de depuración que debes evitar

🧪 Aprende probando

Ejemplo Ejemplo guiado: detectar NaN en total de carrito Usa logs y validaciones para descubrir por qué el total termina en NaN.

⌄

Ejemplo Ejemplo guiado: por qué entra en la rama equivocada Depura una condición que falla por tipo inesperado recibido desde una API.

⌄

Ejemplo Demo interactiva: laboratorio de depuración guiada Provoca bugs comunes y observa pistas en consola para identificar causa raíz.

⌄

🏁 Retos

Reto Reto 1: añade trazas útiles para aislar el bug Inserta logs estratégicos para detectar por qué una suma devuelve NaN.

⌄

Reto Reto 2: corrige una condición tras depurar tipos Ajusta una condición que nunca entra por diferencia de tipo.

⌄

🧰 Recursos

Enlaces útiles

Chrome DevTools: Debug JavaScript javascript.info: Debugging in browser MDN: Error reference MDN: debugger statement MDN: console MDN: try...catch

Test

Comprueba tus conocimientos con un test sobre JavaScript.

Test de JavaScript

Recursos del curso 62

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 11

Scope, hoisting y TDZ: por qué tu variable existe (o falla) en cada línea

Lección 13

Arrays en JavaScript: listas con estructura y control

›