En la educación tradicional, el error suele verse como una falta de estudio. En la programación, el error es información. Es el sistema comunicándose contigo, diciéndote exactamente qué pieza del rompecabezas no encaja.
Cuando la IA te entrega un código que no funciona, el impulso natural de un principiante es la frustración: «La máquina no sirve», o «Lo pedí mal». Debemos cambiar esa mentalidad. El desarrollo de software es un proceso iterativo. El primer código que te entrega la IA es un borrador; los errores son las revisiones, y tu labor como arquitecto es guiar esas revisiones.
Existen tres tipos principales de errores con los que te enfrentarás en Google AntiGravity:
Errores de Sintaxis: Falta una coma, un punto y coma, o cerraste mal una llave {. El código simplemente no arranca. Son los más fáciles de solucionar.
Errores de Ejecución (Runtime Errors): El código está bien escrito, pero cuando el estudiante hace clic en un botón, el programa intenta buscar un elemento que no existe y colapsa.
Errores Lógicos: El código funciona, no hay alertas rojas, pero el resultado es incorrecto (por ejemplo, la calculadora suma 2 + 2 y muestra 22 porque concatenó el texto en lugar de sumar los números). Son los más difíciles de detectar.
Para saber qué está fallando, necesitamos mirar el motor del coche. En el desarrollo web, ese motor es la Consola del Desarrollador de tu navegador (Chrome, Edge, Firefox).
Para abrirla en cualquier momento mientras pruebas tu proyecto, simplemente presiona la tecla F12 en tu teclado, o haz clic derecho en tu página, selecciona «Inspeccionar» y ve a la pestaña «Consola» (Console).
La programación está estandarizada a nivel global en el idioma inglés. Todos los lenguajes de programación (HTML, CSS, JavaScript) usan palabras clave en inglés, y todos los mensajes de error que arroja el navegador estarán en inglés.
Para un desarrollador o docente cuyo entorno de vida, comunicación y pedagogía es estrictamente el español, enfrentarse a un muro de texto rojo diciendo Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') genera una barrera y mucha ansiedad.
Aquí es donde entra el inmenso valor de tener la IA de Google AntiGravity configurada en español. Tú no necesitas aprender inglés para solucionar el error; necesitas usar la IA como tu intérprete técnico.
Abre la Consola (F12) y busca el texto rojo.
Copia todo el texto del error, por incomprensible que parezca.
Abre el chat de IA en AntiGravity y usa un prompt de traducción y diagnóstico.
Prompt de Diagnóstico (Nivel Inicial):
«La consola de mi navegador me está mostrando este error en inglés al intentar ejecutar la aplicación. No hablo inglés y no entiendo qué está fallando. Por favor, traduce el error a español, explícame de forma muy sencilla, como si fuera un estudiante, qué significa y dime en qué línea de mi código suele ocurrir este problema. > Error: [PEGA EL ERROR EN INGLÉS AQUÍ]»
La IA te responderá en tu idioma: «El error significa ‘Tipo de Error: No se puede leer la propiedad nula’. Básicamente, tu código de JavaScript está intentando agregarle una acción a un botón que no existe en tu archivo HTML. Revisa si escribiste mal el ID del botón.»
Acabas de convertir un bloqueo por el idioma en un paso claro de acción.
Decirle a AntiGravity «Esto no funciona» es el equivalente a ir al médico y decirle «Me siento mal», sin especificar si te duele la cabeza, el estómago o una pierna. El médico (la IA) intentará adivinar, y lo más probable es que te dé la medicina equivocada.
Para que la IA arregle su propio código, debemos aplicar una comunicación estructurada.
A continuación, analizamos las «Instrucciones incorrectas» (que perpetúan el error o confunden a la IA) versus las «Instrucciones correctas y detalladas» que garantizan una solución rápida.
| Situación | Instrucciones Incorrectas (Vagas) | Instrucciones Correctas y Detalladas (Estructuradas) |
| Fallo visual (CSS) | «El botón se ve feo y chueco.» | «El diseño no funciona como pedí. En el código CSS que generaste, el botón ‘.btn-enviar’ está apareciendo pegado al borde izquierdo de la pantalla en lugar de estar centrado. Tampoco tiene el color azul que solicité. Por favor, revisa las propiedades ‘margin’ y ‘background-color’ y dame el código CSS corregido.» |
| Fallo de consola (Error en Rojo) | «Me salió un error en rojo, arréglalo. [Pega el error]» | «Al hacer clic en el botón de calcular notas, la aplicación no hace nada y la consola arroja este error: ReferenceError: notaSer is not defined. Aquí tienes la función calcularNota() que me diste antes. Por favor, identifica por qué no reconoce la variable y dame la función reparada.» |
| Fallo Lógico (Sin error en consola) | «La calculadora suma mal.» | «Hay un error de lógica. El código no marca ningún error en la consola, pero cuando ingreso la nota 10 en el ‘Ser’ y la nota 30 en el ‘Saber’, en lugar de mostrar ’40’, el resultado final muestra ‘1030’. Parece que está concatenando texto en vez de sumar números. Arregla el código JavaScript para asegurar operaciones matemáticas.» |
| El código es largo | (Pega un archivo entero de 1000 líneas de HTML, CSS y JS juntos y dice «Algo falla») | «Tengo un error en el archivo JavaScript. Solo te enviaré la función cargarPregunta() porque he comprobado que el HTML funciona bien. Revisa esta función específica y dime si hay algún error de sintaxis que impida que se ejecuten las preguntas.» |
Observa la columna de «Instrucciones Correctas». Todas siguen un patrón mental poderoso para depurar código, que puedes adoptar como regla de oro:
Acción: ¿Qué estabas haciendo? («Al hacer clic en el botón…»)
Expectativa: ¿Qué se suponía que debía pasar? («…esperaba que la foto cambiara…»)
Realidad: ¿Qué pasó en realidad? («…pero la foto desapareció y salió un error en rojo.»)
Contexto: Entregarle a la IA el fragmento de código implicado.
Si usas este patrón en AntiGravity, resolverás el 95% de los problemas en el primer intento.
A medida que tus proyectos para e-learning crezcan, los errores serán más sutiles. A veces, la IA de Google AntiGravity, en su intento por ser útil, te reescribirá todo el archivo de nuevo. Esto es peligroso porque puede dañar cosas que sí estaban funcionando.
No sobrecargues el «cerebro» de la IA con información irrelevante. Si el error está en la suma de las notas, no le pegues el código CSS de los colores de la aplicación.
Técnica del console.log() (La linterna en la oscuridad)
Cuando tienes un error lógico (el programa no se rompe, pero hace algo raro), la mejor herramienta es pedirle a la IA que te ayude a «ver» qué está pasando por dentro del código usando la función console.log(). Esta función imprime mensajes secretos en la consola del navegador que solo tú, el desarrollador, puedes ver.
Prompt de Aislamiento Lógico:
«Mi función de calcular el promedio está dando un resultado incorrecto. No sé en qué paso matemático se está equivocando. Por favor, toma mi función JavaScript y agrégale varias instrucciones
console.log()en cada paso. Quiero que la consola me imprima el valor exacto de las variables antes de sumarlas y después de sumarlas, para poder aislar el problema exacto.»
La IA te devolverá tu código modificado con «sensores» integrados:
JavaScript
function sumarNotas(ser, saber) {
console.log("Iniciando la función. Valor del Ser:", ser); // Sensor 1
console.log("Valor del Saber:", saber); // Sensor 2
let resultado = ser + saber;
console.log("El resultado de la suma es:", resultado); // Sensor 3
return resultado;
}
Al probar esto y abrir la consola con F12, si ves que dice: Iniciando la función. Valor del Ser: "10" (con comillas, indicando que es texto), habrás descubierto el problema visualmente sin adivinar.
Incluso los expertos se enfrentan a un fenómeno frustrante: La obstinación del modelo generativo.
Ocurre cuando le reportas un error a AntiGravity, la IA te pide disculpas, te da una «solución», pruebas la solución y… el error sigue ahí. Le vuelves a decir que falló, y la IA vuelve a pedir disculpas y te entrega exactamente el mismo código erróneo.
¿Por qué ocurre esto? Porque el «Contexto» de la conversación se ha contaminado. La IA está priorizando lógicamente su respuesta anterior por sobre la tuya.
Como desarrollador experto, debes tomar el control de la directiva y forzar a la IA a cambiar de enfoque. Si llevas dos intentos y la IA no lo resuelve, detente.
Estrategia 1: Forzar una nueva ruta lógica
«La solución que me diste vuelve a dar el mismo error de ‘Null Reference’. Evidentemente, este enfoque usando
getElementByIdno está funcionando en este contexto específico. Olvida la solución anterior. Piensa en una estrategia completamente diferente para capturar el valor de ese botón, tal vez usandoquerySelectoro delegación de eventos. Explícame tu nuevo enfoque antes de escribir el código.»
Estrategia 2: Limpieza Quirúrgica (Reinicio de Chat)
La técnica más letal del Nivel Experto. Si el chat de IA en AntiGravity ya tiene 30 mensajes y está confundiendo el código de la Lección 2 con el de la Lección 4, el contexto está insalvable.
Copia tu código actual funcional.
Abre una Nueva Conversación en el panel de IA (borrando el historial previo).
Pega el código con un prompt de Contexto Cero: «Actúa como un depurador Senior. Este es mi código actual y limpio. Tengo este error específico. Resuélvelo.»
Al estar con la «mente en blanco», la IA no arrastrará los errores previos de la conversación pasada y su precisión volverá a ser del 100%.
La única forma de perder el miedo a los errores rojos en la consola es provocarlos nosotros mismos. Vamos a realizar un ejercicio de «vacunación» contra el pánico. Induciremos un error a propósito en nuestra aplicación y lo solucionaremos guiando a la máquina.
Abre Google AntiGravity. Crea un archivo llamado practica_errores.html. Abre tu chat de IA y pídele un código muy sencillo usando el framework R.C.T.F:
«Actúa como programador web. Tarea: Escribe el código HTML y JavaScript en un solo archivo para un botón simple. Al hacer clic en el botón, el código debe leer el nombre que el usuario escriba en un campo de texto y mostrar una alerta que diga ‘Hola [Nombre]’. Formato: Código completo y limpio.»
Pega el código en tu archivo. Pruébalo. Escribe tu nombre, haz clic, y comprueba que la alerta funciona perfectamente.
Vamos a romper el código de forma sutil, simulando el error más común de toda la programación web: el error de tipeo.
En el archivo HTML, busca la etiqueta del campo de texto (el input). Debería tener un ID, por ejemplo: id="nombreUsuario".
Modifícalo borrándole una letra. Déjalo así: id="nombreUsuari".
Guarda el archivo. Vuelve a probar tu aplicación en la Vista Previa en Vivo. Escribe un nombre y haz clic en el botón.
Resultado: No pasará nada. Silencio total. La aplicación está rota.
Siente la tranquilidad de que esto es normal.
Presiona F12 para abrir la consola de tu navegador.
Allí verás un mensaje de error aterrador en rojo que probablemente diga algo como: Uncaught TypeError: Cannot read properties of null (reading 'value').
Copia el error de la consola en inglés. No intentes adivinar qué significa. Vamos a usar nuestra técnica de Nivel Intermedio y el patrón «Acción -> Expectativa -> Realidad».
Abre tu chat de Google AntiGravity y aplica este prompt exacto:
«Tengo un problema con la aplicación. Al escribir un nombre y hacer clic en el botón, esperaba que saliera la alerta de saludo, pero no hace absolutamente nada. Abrí la consola con F12 y me muestra este error en inglés que no comprendo: [PEGA TU ERROR AQUÍ]. Aquí está mi código completo: [PEGA TODO TU CÓDIGO HTML Y JS AQUÍ]. Por favor, explícame en español claro qué significa el error y señálame exactamente en qué línea de mi código me he equivocado para poder corregirlo.»
La IA de AntiGravity analizará el código y el error. Inmediatamente detectará la discrepancia y te responderá algo muy similar a esto:
«El error ‘Cannot read properties of null’ significa que JavaScript está intentando leer el valor de algo que está vacío o que no existe. He revisado tu código y el problema está en la escritura del ID.
En tu JavaScript estás buscando un elemento llamado nombreUsuario:
document.getElementById('nombreUsuario')
Pero en tu HTML lo tienes escrito al revés o incompleto:
<input id="nombreUsuari">
Para solucionarlo, solo debes asegurarte de que ambos nombres coincidan exactamente.»
Corrige tu HTML devolviéndole la ‘o’ final. Guarda, prueba, y la aplicación volverá a la vida.
Has completado un rito de paso fundamental en el desarrollo tecnológico. Has dejado de ser un usuario pasivo que se paraliza ante un fallo, para convertirte en un diagnosticador activo.
En este recorrido exhaustivo hemos aprendido que:
La IA es un copiloto, no un mago. Si comete errores, somos nosotros quienes pilotamos la nave de vuelta a buen puerto.
El idioma no es una barrera final. La consola hablará en inglés técnico, pero AntiGravity puede traducir y pedagogizar ese error para que lo comprendas al instante.
La especificidad es poder. Al usar el patrón «Acción -> Expectativa -> Realidad» junto con fragmentos de código aislados, le damos a la máquina exactamente lo que necesita para arreglarse a sí misma.
Romper el contexto a veces es necesario. Si la IA se atasca, reiniciar el chat es la mejor herramienta de un experto.
Cuando diseñes tus próximos módulos profesionales, es inevitable que el código se rompa en algún momento. La diferencia es que ahora, cuando presiones F12 y veas letras rojas, no sentirás ansiedad. Sentirás que tienes las herramientas, los métodos y la Inteligencia Artificial de tu lado para diseccionar el problema y crear software inquebrantable.
¡Excelente trabajo resolviendo tu primer «Bug» de forma asistida! Estás listo para avanzar y crear proyectos aún más ambiciosos con la seguridad de que ningún error podrá detenerte.
Sin comentarios