Depurar código paso a paso

El reto

Tienes un fragmento de código que falla y no entiendes por qué. En lugar de buscar en Stack Overflow durante horas, puedes pedirle a Claude que lo analice con un razonamiento estructurado.

El prompt

Actúa como un desarrollador senior revisando un bug report.

Lenguaje: [Python / JavaScript / TypeScript / etc.]
Error que obtengo:
[pega el mensaje de error exacto]

Código:
```[lenguaje]
[pega aquí el código con el bug]

Por favor:

1. Explica qué está causando el error (en una frase).
2. Muestra el código corregido.
3. Explica el cambio para que no vuelva a ocurrir.

## Por qué funciona

- **"Actúa como"**: da contexto de rol que orienta el tipo de respuesta.
- **Error exacto**: Claude puede interpretar el stack trace y relacionarlo con el código.
- **Tres pasos**: diagnóstico → solución → aprendizaje. Evitas recibir solo el código corregido sin entender la causa.

## Ejemplo real

**Error:**

TypeError: Cannot read properties of undefined (reading 'map') at ProductList (ProductList.jsx:12)

**Código con bug:**
```jsx
export function ProductList({ products }) {
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Respuesta de Claude:

1. products es undefined cuando el componente se renderiza antes de que lleguen los datos.
2. Código corregido: {(products ?? []).map(p => ...)} o añadir if (!products) return null; al inicio.
3. En React, un prop puede ser undefined en el primer render. Usa un valor por defecto o guarda con render condicional.

Consejo pro

Añade al prompt:

"Si hay más de un problema en el código, listarlos todos aunque no estén relacionados con el error actual."

Esto convierte la revisión puntual en una revisión de calidad.