Probar, leer un error, corregir

Esta lección todavía está en pruebas: mejora con los comentarios de quienes la siguen. Si algo no está claro, hay que corregir la lección, no a ti.

Al final de esta lección, sabrás

probar tu herramienta antes y después de cada modificación;
abrir la consola del navegador y encontrar en ella un mensaje de error;
darle al agente un informe que pueda corregir;
comprobar la corrección y luego todo lo demás.

Por qué te interesa

Tarde o temprano, un botón no hará nada. Sin método, se describe el problema de forma vaga, el agente adivina y a veces modifica tres cosas para arreglar una. Con la consola del navegador, tienes el mensaje exacto del error. Con él, la corrección suele ser de una línea. Esta lección te hace arreglar un bug real, en un archivo de ejercicio.

Antes de empezar


Necesitas	Claude Code (app o terminal), en modo Manual, tu herramienta (lección 3), el archivo de ejercicio con un error (recurso) y Chrome u otro navegador con sus herramientas para desarrolladores
Costo	La suscripción del agente: como mínimo Claude Pro, 18 € al mes sin IVA con facturación mensual, o 15 € al mes sin IVA con la suscripción anual de 180 € pagada por adelantado; precios mostrados en claude.com/pricing a fecha de 24/10/2026
Duración	60 minutos
Recordatorio	Relee un mensaje de error antes de pegarlo: no debe contener ningún dato personal

Entenderlo en 3 minutos

Probar es repetir las pruebas de tu especificación, una por una: antes de una modificación (para saber lo que funcionaba) y después (para saber lo que sigue funcionando).

La consola es una parte de las herramientas para desarrolladores del navegador. Según la documentación de Chrome (24/10/2026), sirve para mostrar los mensajes que registra la página y para ejecutar JavaScript. Los errores de JavaScript aparecen ahí. Para abrirla en Chrome:

	La consola	Las herramientas para desarrolladores
Mac	Cmd + Option + J	Cmd + Option + I
Windows	Ctrl + Mayúsculas + J	Ctrl + Mayúsculas + I, o F12

Estos atajos son los de Chrome, que usa esta lección: instálalo si no lo tienes. Si prefieres Safari en Mac y su menú Desarrollo no aparece en la barra de menús, elige Safari > Configuración (en España: «Ajustes») > Avanzado y luego marca «Mostrar funciones para desarrolladores web». El texto de un mismo error puede cambiar de un navegador a otro (en nuestra prueba con el motor de Safari: «Can’t find variable: aujourdui»).

Un buen informe, en cuatro líneas:

lo que hiciste («hago clic en Devuelto y luego en Aceptar»);
lo que esperabas («el libro sale de la lista»);
lo que pasó («nada, el libro se queda»);
el mensaje exacto de la consola, copiado tal cual.

Y tres indicaciones: explica en dos frases, cambia lo menos posible, di cómo comprobarlo.

Hagámoslo juntos

1Paso 1: El archivo de ejercicio

Descarga el registro de préstamos con un error (recursos): clic derecho en el enlace, Guardar vínculo como (en España: «Guardar enlace como»; el nombre de esta opción cambia según el navegador), en tu carpeta de proyecto. Comprueba que el nombre del archivo termina en .html: si no, cámbiale el nombre a carnet-emprunts-avec-erreur.html. Ábrelo con un doble clic (si tu navegador predeterminado no es Chrome: clic derecho, Abrir con en Mac o «Open with» (etiqueta exacta no confirmada) en Windows, y luego Chrome). Agrega dos préstamos inventados y luego haz clic en Devuelto en uno de ellos, y en Aceptar. No pasa nada.

2Paso 2: Encontrar el mensaje

Abre la consola (Cmd + Option + J en Mac, Ctrl + Mayúsculas + J en Windows, en Chrome). Vuelve a hacer clic en Devuelto. Aparece un mensaje en rojo. Cópialo exactamente.

En nuestra prueba del 24/10/2026, el mensaje que apareció en Chromium decía: «aujourdui is not defined».

3Paso 3: El informe

En Claude Code, en tu carpeta de proyecto, en modo Manual:

Cuando hago clic en «Devuelto» en [nombre del archivo] y luego en Aceptar, no pasa nada: el libro se queda en la lista.
Abrí la consola del navegador, y muestra en rojo: [pega el mensaje exacto]
Explícame en 2 frases sencillas qué es lo que falla y luego corrige el archivo cambiando lo menos posible. No toques nada más. Después dime cómo comprobar que está arreglado.

En nuestra prueba, una sesión nueva, solo con este informe, respondió: falta una «h» en el nombre de una función del programa, la parte que da la fecha del día («aujourdui» en lugar de «aujourdhui», la forma en que este archivo escribe la palabra francesa «aujourd’hui», «hoy»). Cambió una sola línea, la del error. El archivo de ejercicio guarda sus datos aparte: lo que escribas en él no se mezcla con tu registro de la lección 3.

4Paso 4: Comprobar y luego volver a comprobarlo todo

Recarga la página (Cmd + R o Ctrl + R), con la consola abierta.
Vuelve a hacer clic en Devuelto: el libro sale de la lista, sin ningún mensaje en rojo.
Repite todas las pruebas de la especificación: una corrección puede romper otra cosa.

Ahora te toca a ti

Arregla el archivo de ejercicio, con el método de los pasos 2 a 4.
En tu propia herramienta, acostúmbrate a tener la consola abierta cuando pruebes una función nueva.
Anota en tu diario cada error que encuentres: el mensaje, la causa, la corrección.

Recursos para descargar

El registro de préstamos con un error: la misma herramienta que el ejemplo de la lección 3, con un error colocado a propósito y sus datos guardados aparte. Datos inventados.

Comprobar

Funcionó si:

encontraste el mensaje de error en la consola;
tu informe tiene las cuatro líneas, con el mensaje exacto;
la corrección solo cambia lo que era necesario;
repetiste todas las pruebas de la especificación después de la corrección.

Errores frecuentes:

«no funciona» sin el mensaje de la consola;
dejar que el agente «mejore» otras partes durante la corrección;
comprobar solo la corrección, no el resto;
pegar un mensaje de error sin releerlo.

Guardar y retomar

Antes de una corrección, guarda una versión que funciona (lección 5): si la corrección empeora las cosas, vuelves atrás.
Guarda tu lista de errores en el diario: a menudo se repiten.

Para ir más lejos

opcional

En Claude Code, puedes pedir: «Agrega una prueba sencilla que compruebe [el criterio]». Pero una prueba escrita por el agente también se relee: comprueba que falla cuando el criterio no se cumple.

Palabras nuevas

5 palabras explicadas

Palabra	Lo que significa
Bug	Un error en un programa, que le impide hacer lo previsto
Consola	La parte de las herramientas para desarrolladores donde aparecen los mensajes y los errores
Herramientas para desarrolladores	Las herramientas integradas en el navegador para inspeccionar una página
Informe	La descripción de un problema: lo que hiciste, lo que esperabas, lo que obtuviste y el mensaje
Regresión	Una corrección que rompe algo que funcionaba

El error colocado a propósito, el mensaje y la corrección por una sesión nueva se probaron realmente con Claude Code 2.1.310 y Chromium (informe de pruebas, T55). Las sesiones de prueba con Claude Code se hicieron en modo no interactivo (claude -p), una sola vez cada una: lo que veas puede ser diferente (solicitudes de permiso, redacción, número de preguntas). Por verificar: no se describen las herramientas para desarrolladores de Safari, Firefox y Edge.