Debug

Qué es

Debug (o debugging) es el proceso sistemático de encontrar y corregir errores en el código. El nombre viene de “de-bug” = quitar bugs.

Incluye:

1. Reproducir el problema
2. Aislar la causa raíz
3. Entender por qué ocurre
4. Corregir el código
5. Verificar que la solución funciona

Pronunciación

IPA: /diːˈbʌɡ/

Suena como: “di-bag” - dos sílabas, énfasis en la segunda

Errores comunes:

• ❌ “de-bug” (la ‘e’ no suena como ‘e’ española)
• ❌ “deboog” (la ‘u’ suena como ‘a’ corta)

Variantes:

• Debug (verbo): “I need to debug this”
• Debugging (sustantivo/gerundio): “Debugging is an art”
• Debugger (herramienta): “Open the debugger”

Técnicas de Debugging

1. Print Debugging (La más básica)

function calcularTotal(items) {
  console.log('Items recibidos:', items);  // 👈 Debug

  let total = 0;
  for (const item of items) {
    console.log('Procesando item:', item);  // 👈 Debug
    total += item.precio;
    console.log('Total parcial:', total);   // 👈 Debug
  }

  console.log('Total final:', total);  // 👈 Debug
  return total;
}

Pros: Rápido, funciona en cualquier lado Contras: Hay que limpiar después, no permite pausa

2. Debugger con Breakpoints (La más poderosa)

function calcularTotal(items) {
  debugger;  // 👈 El código se pausará aquí

  let total = 0;
  for (const item of items) {
    total += item.precio;  // Puedes poner breakpoint aquí
  }

  return total;
}

Pros: Inspeccionar variables en vivo, ejecutar paso a paso Contras: Requiere conocer la herramienta

3. Logging Estructurado (La más profesional)

import logger from './logger';

function calcularTotal(items) {
  logger.debug('Iniciando cálculo', { itemCount: items.length });

  try {
    const total = items.reduce((sum, item) => sum + item.precio, 0);
    logger.info('Cálculo completado', { total });
    return total;
  } catch (error) {
    logger.error('Error en cálculo', { error, items });
    throw error;
  }
}

Pros: Persistente, searchable, no modifica comportamiento Contras: Más setup inicial

El Proceso de Debugging

┌─────────────────────────────────────────────────────────────┐
│                    CICLO DE DEBUGGING                        │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│    1. REPRODUCIR     2. HIPÓTESIS      3. PROBAR            │
│    ┌───────────┐     ┌───────────┐     ┌───────────┐        │
│    │ ¿Siempre  │  →  │ ¿Qué puede│  →  │Agregar    │        │
│    │ falla?    │     │ causar    │     │logs o     │        │
│    │ ¿Cuándo?  │     │ esto?     │     │breakpoints│        │
│    └───────────┘     └───────────┘     └───────────┘        │
│          ↑                                    ↓              │
│          │                                    │              │
│    6. VERIFICAR      5. CORREGIR       4. ANALIZAR          │
│    ┌───────────┐     ┌───────────┐     ┌───────────┐        │
│    │ ¿El fix   │  ←  │ Modificar │  ←  │ ¿La       │        │
│    │ funciona? │     │ el código │     │ hipótesis │        │
│    │ ¿Sin      │     │           │     │ era       │        │
│    │ regresión?│     │           │     │ correcta? │        │
│    └───────────┘     └───────────┘     └───────────┘        │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Herramientas de Debug por Lenguaje

Lenguaje	Herramienta	Comando/Atajo
JavaScript	Chrome DevTools	F12 → Sources
Python	pdb / debugpy	import pdb; pdb.set_trace()
Java	IntelliJ Debugger	Shift+F9
C#	Visual Studio	F5
Node.js	VS Code Debugger	F5
React	React DevTools	Extensión Chrome

Caso Práctico: Debuggeando un Login

El problema

“Los usuarios no pueden iniciar sesión. El formulario no hace nada al enviar.”

Paso 1: Reproducir

// Intentar login y observar en consola
form.addEventListener('submit', handleLogin);

Paso 2: Agregar logs estratégicos

async function handleLogin(event) {
  console.log('1. Evento submit disparado');  // ¿Se ejecuta?

  event.preventDefault();
  console.log('2. preventDefault ejecutado');

  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  console.log('3. Datos:', { email, password: '***' });

  try {
    console.log('4. Enviando request...');
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password })
    });
    console.log('5. Response:', response.status);

    const data = await response.json();
    console.log('6. Data:', data);

  } catch (error) {
    console.error('7. Error:', error);  // 🐛 ¡Aquí está!
  }
}

Paso 3: Encontrar el bug

Consola:
1. Evento submit disparado
2. preventDefault ejecutado
3. Datos: { email: "user@test.com", password: "***" }
4. Enviando request...
7. Error: TypeError: Failed to fetch  // 🐛 ¡ENCONTRADO!

Paso 4: Investigar más

// El error indica problema de red/CORS
// Revisar Network tab → Request bloqueado por CORS

Paso 5: Corregir

// Backend necesita headers CORS
// O usar proxy en desarrollo
const response = await fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'  // 🔧 Faltaba este header
  },
  body: JSON.stringify({ email, password })
});

Técnicas Avanzadas

Rubber Duck Debugging

Explícale el problema a un objeto (como un pato de hule). Al verbalizar el problema, frecuentemente encuentras la solución.

Binary Search Debugging

Si tienes un bug en 1000 líneas de código:

1. Comenta la mitad (líneas 500-1000)
2. ¿El bug persiste? → Está en líneas 1-500
3. Comenta la mitad de ese rango
4. Repite hasta encontrar la línea exacta

Time-Travel Debugging

Algunas herramientas permiten “retroceder en el tiempo”:

• Redux DevTools (JavaScript)
• rr (C/C++)
• Chronon (Java)

Anti-patrones de Debugging

Anti-patrón	Problema	Mejor práctica
Cambios random	”Pruebo esto a ver si funciona”	Formular hipótesis primero
Ignorar el stack trace	Buscar en Google sin leer el error	Leer el mensaje completo
No reproducir primero	Asumir que sabes el problema	Siempre reproducir primero
Debuggear en producción	Modificar código live	Usar staging/local
No escribir tests	El bug vuelve después	Agregar test que falla antes del fix

El Mantra del Debugger

"No adivinoes. Observa."
"Si no puedes reproducirlo, no puedes arreglarlo."
"El código hace exactamente lo que le dijiste, no lo que querías."

Términos relacionados

• [[Bug]] - El error que estamos buscando
• [[Breakpoint]] - Punto donde pausamos la ejecución
• [[Stack Trace]] - Rastro de llamadas hasta el error
• [[Logging]] - Registro de eventos para análisis

---

Recuerda: Debugging es una habilidad que mejora con práctica. Los mejores debuggers no son los que más saben, sino los que mejor preguntan y observan.