Prueba y depura código en tiempo real

Encuentra y corrige bugs que solo aparecen cuando dos jugadores interactúan

⏱ Estim. ~10 min

01 · Leer

Tu juego funciona en el happy path — dos jugadores se encuentran, juegan por turnos y alguien gana. Pero el código multijugador en tiempo real tiene toda una categoría de bugs que nunca habías visto.

Estos bugs son dependientes del tiempo. Solo aparecen cuando los eventos llegan en cierto orden, o cuando un jugador hace algo inesperado como cerrar el navegador a mitad de partida. Son invisibles en las pruebas normales porque tú «juegas bien». Los buenos ingenieros también prueban los escenarios feos.

Puntos clave

Los bugs en tiempo real dependen del tiempo — no aparecen en pruebas normales
Los escenarios de desconexión son la fuente más común de bugs
Chrome DevTools tiene un inspector de WebSocket para depurar
Prueba escenarios feos, no solo el happy path

02 · Paso a paso

Usa Chrome DevTools para inspeccionar el tráfico WebSocket. Así depuras problemas de comunicación en tiempo real.

1. Abre DevTools

Haz clic derecho en cualquier parte de la página del juego y elige 'Inspect', o presiona F12. En DevTools, haz clic en la pestaña 'Network' arriba.

2. Filtra por WebSocket

En la pestaña Network, haz clic en el filtro 'WS' (abreviatura de WebSocket). Eso oculta las peticiones HTTP normales y solo muestra las conexiones WebSocket.

3. Encuentra la conexión Socket.io

Recarga la página. Vas a ver aparecer una conexión WebSocket — haz clic en ella. Luego haz clic en la pestaña 'Messages'. Te muestra en vivo cada mensaje enviado y recibido.

4. Observa el flujo de eventos

Juega una partida y mira la pestaña Messages. Vas a ver cosas como 'find-game' saliendo (flecha verde) y 'game-start' entrando (flecha roja). Cada mensaje muestra el nombre del evento y el payload de datos. Esta es la mejor herramienta para depurar Socket.io.

03 · Práctica real

Abre el inspector de WebSocket y confirma que puedes ver el flujo de eventos.

04 · Lista de verificación

Prueba estos 8 casos límite. Abre dos pestañas y prueba cada escenario. Si algo se rompe, encontraste un bug que corregir.

Un jugador cierra la pestaña mientras espera en la cola de matchmaking — ¿el servidor limpia bien?
Un jugador cierra la pestaña a mitad de partida — ¿el rival ve 'Opponent disconnected'?
Un jugador toca una casilla ya ocupada — ¿no pasa nada?
Un jugador toca una casilla cuando no es su turno — ¿no pasa nada?
Un jugador toca varias casillas muy rápido — ¿solo se registra el primer movimiento válido?
El juego termina con un ganador — ¿se ignoran los clics posteriores en el tablero?
Un jugador toca 'Play Again' después de la partida — ¿el matchmaking se reinicia limpio?
Tres pestañas abiertas: dos en partida, una toca 'Find Game' — ¿el tercer jugador espera correctamente?

05 · Plantilla de prompt

Si encontraste bugs, o incluso si no, pídele a Claude que revise tu código en busca de problemas comunes de tiempo real.

Ayúdame a revisar el código del juego de tic-tac-toe buscando bugs y casos límite. Mira server.js, game.js, matchmaking.js y public/client.js. Enfócate en: (1) Race conditions — ¿qué pasa si llegan dos eventos al mismo tiempo? (2) Memory leaks — ¿los jugadores desconectados se limpian de todas las estructuras de datos? (3) Estado inconsistente — ¿el cliente y el servidor pueden quedar fuera de sincronía? (4) Validación faltante — ¿un jugador podría enviar un movimiento para un juego en el que no está? Lista los problemas que encuentres y luego corrígelos.

06 · Leer

Depurar código en tiempo real es una habilidad. Cuando algo falla, tu primera herramienta es console.log en el servidor — agrega logs antes y después de cada handler de eventos. La segunda es el inspector de WebSocket del navegador. La tercera es pedirle a Claude que rastree el escenario.

La mayoría de los bugs en tiempo real caen en tres categorías:

1. Referencias obsoletas — un jugador se desconectó pero su socket sigue referenciado en algún lugar 2. Falta de limpieza — el juego terminó pero los datos de la sala no se borraron 3. Race conditions — dos eventos llegaron en un orden que no esperabas

Si tu juego pasa los 8 casos límite, está sólido. Si no, ahora sabes exactamente dónde mirar.

Puntos clave

console.log en el servidor es tu primera herramienta de depuración
El inspector de WebSocket de DevTools es tu segunda herramienta
La mayoría de los bugs son referencias obsoletas, falta de limpieza o race conditions
Cuando te atasques, pídele a Claude que rastree el escenario

07 · Quiz

Un jugador se desconecta a mitad de partida y el servidor no limpia sus datos. ¿Qué pasa cuando entra el siguiente jugador?

El jugador nuevo podría emparejarse con el fantasma del desconectado, lo que causa una partida rota
Nada — el servidor lo maneja automáticamente
Socket.io remueve automáticamente todos los datos de los sockets desconectados
El navegador reconecta al jugador desconectado

Otras lecciones de este capítulo

⚠ La experiencia interactiva completa necesita JavaScript. Actívalo y vuelve a cargar la página.

※ Este es un proyecto educativo independiente — no es un producto oficial de Anthropic. Claude™ es una marca registrada de Anthropic, PBC.