Aprender, buscar y resolver errores

Los errores no son señal de que seas mal programador: son el trabajo diario de todos los programadores, incluso los más experimentados. Lo que diferencia a un profesional es su método para encontrarlos y resolverlos. En esta lección aprenderás a leer errores, buscar documentación, depurar con DevTools, usar la IA con criterio y hacer buenas preguntas.

Concepto

Resolver un error es como ser detective: reúnes pistas (el mensaje de error, la línea, qué cambiaste), formulas una hipótesis, la pruebas y repites. Nunca adivines al azar; avanza con evidencia.

Paso 1: lee el mensaje de error (completo)

El error casi siempre te dice qué pasó y dónde. Ejemplo en la consola del navegador:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at main.js:3:28

• Tipo: TypeError (usaste un valor de forma incorrecta).
• Mensaje: intentaste leer addEventListener de algo que es null.
• Ubicación: archivo main.js, línea 3, columna 28.

// main.js
const boton = document.querySelector('#enviar'); // devolvió null
boton.addEventListener('click', enviar);          // línea 3: ¡error!

Causas probables: el elemento no tiene id="enviar" (error de escritura) o el script se ejecuta antes de que exista el HTML (falta defer).

Errores frecuentes y qué significan

Error	Significado habitual
404 (Not Found) en Network	La ruta de un archivo está mal (CSS, imagen, script)
Uncaught ReferenceError: x is not defined	Usas una variable o función que no existe o está mal escrita
Uncaught SyntaxError: Unexpected token	Falta o sobra un paréntesis, llave, coma o comilla
TypeError: ... is not a function	Llamas como función algo que no lo es
CORS policy	El navegador bloquea pedir datos a otro dominio sin permiso
Failed to load resource: net::ERR_FILE_NOT_FOUND	Ruta incorrecta abriendo el archivo directamente
El CSS "no se aplica"	Ruta del link mal, selector mal escrito o especificidad

Paso 2: aísla el problema

1. ¿Qué cambiaste por última vez? Con Git, git diff te lo muestra.
2. Reproduce el error de forma consistente.
3. Divide y vencerás: comenta la mitad del código; si el error desaparece, está en esa mitad. Repite.
4. Revisa lo obvio: ¿guardaste el archivo? ¿Estás viendo el archivo correcto en el navegador? ¿Hay caché? (Recarga forzada: Ctrl + Shift + R / Cmd + Shift + R.)

Paso 3: depura con las herramientas

CSS: el panel Elements

Si un estilo no se aplica, inspecciona el elemento:

• Las reglas tachadas fueron sobrescritas por otra más específica.
• Un ícono de advertencia ⚠ indica una propiedad o valor inválido (por ejemplo, colr: red).
• En la pestaña Computed ves el valor final de cada propiedad y de dónde viene.

Truco clásico para ver los límites de todas las cajas:

/* Pégalo temporalmente para ver qué elemento se desborda */
* { outline: 1px solid red; }

JavaScript: console.log y el depurador

function calcularTotal(precio, cantidad) {
  console.log('precio:', precio, 'cantidad:', cantidad); // ¿llegan los valores esperados?
  const total = precio * cantidad;
  console.table([{ precio, cantidad, total }]);          // vista en tabla
  return total;
}

calcularTotal('100', 3); // ¿'100' es texto o número?

Para casos complejos, escribe debugger; en tu código o pon un punto de interrupción en la pestaña Sources: la ejecución se pausa y puedes inspeccionar cada variable paso a paso.

Paso 4: busca como profesional

Fuentes confiables

MDN Web DocsLa referencia definitiva de HTML, CSS y JavaScript.Can I useQué navegadores soportan cada característica.Stack OverflowMillones de preguntas y respuestas de programación.web.devGuías de Google sobre rendimiento y buenas prácticas.

Además, la documentación oficial de cada herramienta (Laravel, React, Tailwind...) suele ser la mejor fuente y la más actualizada.

Cómo buscar en Google

• Copia el mensaje de error sin las partes propias de tu código (nombres de variables, rutas).
• Busca en inglés: hay muchísimos más resultados. css grid center item, mejor que "cómo centrar con grid".
• Añade la tecnología y, si importa, la versión: laravel 11 validation unique.
• Usa comillas para frases exactas: "Cannot read properties of null".
• Antepón mdn para ir directo a la documentación: mdn flex-wrap.
• Revisa la fecha de la respuesta: una solución de 2014 puede estar obsoleta.

Usar la IA con criterio

Los asistentes de IA (ChatGPT, Claude, Copilot) son excelentes compañeros para explicar conceptos y errores, pero:

• Entiende cada línea que copies. Si no puedes explicarla, no la uses en un proyecto de cliente.
• Pide explicaciones, no sólo código: "¿Por qué este selector no se aplica?".
• Verifica con la documentación: la IA puede inventar propiedades o usar versiones antiguas.
• Al aprender, intenta resolver primero tú solo 15–20 minutos. La lucha es donde se aprende.

Hacer buenas preguntas

Si necesitas ayuda (en un foro, Discord o a un colega), una buena pregunta incluye:

1. Qué intentas lograr.
2. Qué hiciste (código mínimo que reproduce el problema; usa un CodePen o el Playground).
3. Qué esperabas y qué pasó en realidad (mensaje de error completo).
4. Qué ya intentaste.

Mal:  "No me funciona el menú, ayuda"

Bien: "Quiero que el menú móvil se abra al hacer clic en el botón hamburguesa.
      Al hacer clic no pasa nada y la consola muestra:
      'Uncaught TypeError: Cannot read properties of null (reading classList)' en main.js:5.
      Ya verifiqué que el botón tiene id='menu-btn'. Código mínimo: [enlace a CodePen]"

El método del patito de goma

Explica tu código línea por línea en voz alta, a un patito de goma o a quien sea. Muy a menudo descubres el error a mitad de la explicación.

Error común

Cambiar diez cosas a la vez esperando que algo funcione. Si se arregla, no sabrás qué lo resolvió; si empeora, no sabrás qué lo rompió. Cambia una cosa a la vez y prueba.

Cómo aprender de forma efectiva

• Construye proyectos: ver tutoriales sin programar crea una ilusión de aprendizaje. Haz, rompe, arregla.
• Aprende en espiral: primero lo básico de todo, luego profundiza. No necesitas saberlo todo de CSS para empezar JavaScript.
• Toma notas con tus propias palabras y guarda snippets útiles.
• Constancia > intensidad: una hora diaria vale más que diez horas un sábado al mes.
• Lee código ajeno en GitHub: aprenderás patrones y estilos.

Ejercicios

1. Este código lanza un error. Lee el mensaje imaginario y encuentra la causa:

const titulo = document.querySelector('.titulo-principal');
titulo.textContent = 'Hola';
// Uncaught TypeError: Cannot set properties of null (setting 'textContent')

<h1 class="titulo principal">Bienvenido</h1>

2. Escribe la búsqueda de Google que harías para: "quiero que el footer se quede abajo aunque haya poco contenido".
3. Reescribe esta pregunta para que sea buena: "mi css no sirve".

Ver solución

1. La clase en HTML es titulo principal (con espacio, son dos clases: titulo y principal), pero el selector busca .titulo-principal (con guion). Por eso querySelector devuelve null. Solución: cambiar el HTML a class="titulo-principal".

2. css sticky footer flexbox o css footer bottom of page min-height 100vh.

3. "Enlacé css/styles.css en mi index.html, pero ningún estilo se aplica. En la pestaña Network veo un 404 para styles.css. Mi estructura es proyecto/index.html y proyecto/estilos/styles.css. ¿Qué ruta debo usar?" (La respuesta: href="estilos/styles.css".)

Resumen

• Lee el error completo: tipo, mensaje, archivo y línea.
• Aísla el problema: qué cambiaste, divide y vencerás, revisa lo obvio.
• Usa DevTools: Elements para CSS, Console y Sources para JavaScript, Network para rutas.
• Busca en inglés y en fuentes confiables: MDN, documentación oficial, Stack Overflow.
• Usa la IA para entender, no para copiar a ciegas.
• Haz buenas preguntas: objetivo, código mínimo, resultado esperado vs. real, qué intentaste.

Siguiente: Ruta de aprendizaje recomendada.