Depurar JavaScript con ayuda de la IA

Los fallos que más cuestan no dan error: el filtro sale vacío o la cuenta no cuadra. Aprende a buscarlos observando los datos con console.table y puntos de interrupción, y a pedir a la IA pistas en lugar de la solución.

Los fallos de lógica no muestran nada en rojo: el código funciona, pero hace otra cosa de la que crees.

Método: reproducir, observar los datos reales, formular una hipótesis y comprobarla antes de cambiar nada.

console.table enseña arrays de objetos de un vistazo; debugger y los puntos de interrupción te dejan avanzar línea a línea.

Pide a la IA hipótesis y cómo comprobarlas, no el código corregido: así aprendes a depurar tú.

  • La consola está limpia y, aun así, el resultado está mal.
  • Un TypeError te dice dónde mirar. Un filtro de proyectos que devuelve una lista vacía, un contador que siempre se queda uno por debajo o un botón que funciona la primera vez y no la segunda no dicen nada: el programa hace exactamente lo que escribiste, que no es lo que querías.
  • Pedirle a la IA «arréglalo» en estos casos funciona a veces, pero no aprendes a encontrarlos tú, y cuando la IA no acierta te quedas sin recursos. Por eso conviene seguir un método.
  • No cambies código hasta saber qué está pasando.
  • console.log, console.table y puntos de interrupción.

Los fallos más difíciles no dan error

La consola está limpia y, aun así, el resultado está mal.

Un TypeError te dice dónde mirar. Un filtro de proyectos que devuelve una lista vacía, un contador que siempre se queda uno por debajo o un botón que funciona la primera vez y no la segunda no dicen nada: el programa hace exactamente lo que escribiste, que no es lo que querías.

Pedirle a la IA «arréglalo» en estos casos funciona a veces, pero no aprendes a encontrarlos tú, y cuando la IA no acierta te quedas sin recursos. Por eso conviene seguir un método.

Método: observar, sospechar, comprobar

No cambies código hasta saber qué está pasando.

Herramientas para ver los datos

console.log, console.table y puntos de interrupción.

console.log con etiqueta (console.log('categoría buscada:', categoria)) evita confundir qué valor es cuál. Para arrays de objetos usa console.table(proyectos): los ves como una tabla y salta a la vista la mayúscula que sobra o el campo vacío.

Cuando necesitas ver cómo cambian los valores paso a paso, escribe debugger; en la línea donde quieres parar y abre las DevTools: el navegador se detiene ahí. En el panel Fuentes (Sources) puedes avanzar línea a línea y ver todas las variables en cada momento. También puedes poner el punto de interrupción haciendo clic en el número de línea, sin tocar el código.

La IA como tutor: pide hipótesis, no parches

Pídele posibles causas y cómo comprobarlas, no el código corregido.

Cuando te atasques, cuéntale a la IA lo que esperabas, lo que obtienes y lo que has observado (pega la salida de la consola), y termina así: «Dame dos o tres hipótesis de por qué pasa y cómo comprobar cada una con console.log o un punto de interrupción. No me des el código corregido.»

Comprueba tú las hipótesis una a una. Otra técnica útil: pide a la IA que te explique qué hace tu función línea a línea y compáralo con lo que tú creías. El fallo suele estar donde no coinciden.

Los sospechosos habituales

Cinco fallos frecuentes, también en el código generado.

  • = en lugar de === en una condición: asigna en vez de comparar y la condición casi siempre es verdadera.
  • i <= lista.length en un bucle: da una vuelta de más y lee undefined.
  • Texto comparado con número: '5' === 5 es false; lo que llega de un input siempre es texto.
  • Mayúsculas y espacios: 'Branding' === 'branding' es false; normaliza con toLowerCase() y trim().
  • Un return que falta: la función calcula bien… y devuelve undefined.
IA para programar
08

Depurar JavaScript con ayuda de la IA

Los fallos que más cuestan no dan error: el filtro sale vacío o la cuenta no cuadra. Aprende a buscarlos observando los datos con console.table y puntos de interrupción, y a pedir a la IA pistas en lugar de la solución.

Código del tema: console.table · debugger · hipótesis

📘 Teoría

Los fallos más difíciles no dan error

La consola está limpia y, aun así, el resultado está mal.

Un TypeError te dice dónde mirar. Un filtro de proyectos que devuelve una lista vacía, un contador que siempre se queda uno por debajo o un botón que funciona la primera vez y no la segunda no dicen nada: el programa hace exactamente lo que escribiste, que no es lo que querías.

Pedirle a la IA «arréglalo» en estos casos funciona a veces, pero no aprendes a encontrarlos tú, y cuando la IA no acierta te quedas sin recursos. Por eso conviene seguir un método.

Método: observar, sospechar, comprobar

No cambies código hasta saber qué está pasando.

1

1. Reproduce

Encuentra los pasos y los datos exactos con los que falla. Si no lo puedes reproducir, no sabrás si lo has arreglado.

2

2. Observa

Mira los valores reales en el punto donde se tuercen: console.log con etiqueta, console.table o un punto de interrupción.

3

3. Sospecha

Formula una hipótesis concreta: «compara 'Branding' con 'branding'», no «algo falla en el filtro».

4

4. Comprueba

Cambia una sola cosa para confirmar o descartar la hipótesis. Si no era eso, deshazlo y vuelve al paso 2.

Herramientas para ver los datos

console.log, console.table y puntos de interrupción.

console.log con etiqueta (console.log('categoría buscada:', categoria)) evita confundir qué valor es cuál. Para arrays de objetos usa console.table(proyectos): los ves como una tabla y salta a la vista la mayúscula que sobra o el campo vacío.

Cuando necesitas ver cómo cambian los valores paso a paso, escribe debugger; en la línea donde quieres parar y abre las DevTools: el navegador se detiene ahí. En el panel Fuentes (Sources) puedes avanzar línea a línea y ver todas las variables en cada momento. También puedes poner el punto de interrupción haciendo clic en el número de línea, sin tocar el código.

La IA como tutor: pide hipótesis, no parches

Pídele posibles causas y cómo comprobarlas, no el código corregido.

Cuando te atasques, cuéntale a la IA lo que esperabas, lo que obtienes y lo que has observado (pega la salida de la consola), y termina así: «Dame dos o tres hipótesis de por qué pasa y cómo comprobar cada una con console.log o un punto de interrupción. No me des el código corregido.»

Comprueba tú las hipótesis una a una. Otra técnica útil: pide a la IA que te explique qué hace tu función línea a línea y compáralo con lo que tú creías. El fallo suele estar donde no coinciden.

Los sospechosos habituales

Cinco fallos frecuentes, también en el código generado.

  • = en lugar de === en una condición: asigna en vez de comparar y la condición casi siempre es verdadera.
  • i <= lista.length en un bucle: da una vuelta de más y lee undefined.
  • Texto comparado con número: '5' === 5 es false; lo que llega de un input siempre es texto.
  • Mayúsculas y espacios: 'Branding' === 'branding' es false; normaliza con toLowerCase() y trim().
  • Un return que falta: la función calcula bien… y devuelve undefined.

🧪 Aprende probando

Ejemplo Ejemplo guiado: el filtro que devuelve una lista vacía No hay errores, pero el filtro no encuentra nada. Mira la tabla de la consola y busca la causa antes de leer la solución comentada.
⌄
Ejemplo Ejemplo guiado: una vuelta de más El bucle muestra un «undefined» al final. Observa el último valor de i.
⌄

🏁 Retos

Reto Reto 1: el contador de aprobados no cuadra Con estas notas deberían salir 4 aprobados (5 o más) y sale otra cifra. Hay dos fallos de lógica y ningún error en la consola.
⌄
Reto Reto 2: pide pistas a la IA, no la solución Escribe la pregunta que le harías a una IA sobre el contador de aprobados para que te ayude a depurar sin darte el código.
⌄

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com