Testare e fare debug del codice in tempo reale

Trovare e correggere i bug che compaiono solo quando due giocatori interagiscono

⏱ Stima ~10 min

01 · Leggi

Il gioco funziona nel percorso felice — due giocatori si trovano, si alternano, qualcuno vince. Ma il codice multiplayer in tempo reale ha un'intera categoria di bug che probabilmente non hai mai incontrato.

Questi bug sono dipendenti dal tempo. Compaiono solo quando gli eventi arrivano in un certo ordine, o quando i giocatori fanno cose inaspettate come chiudere il browser durante la partita. Sono invisibili nei test normali perché stai "giocando bene". I buoni ingegneri testano anche gli scenari brutti.

Punti chiave

I bug in tempo reale sono dipendenti dal tempo — non emergono nei test normali
Gli scenari di disconnessione sono la fonte più comune di bug
Chrome DevTools ha un WebSocket inspector per il debug
Testa gli scenari brutti, non solo il percorso felice

02 · Passo dopo passo

Usa Chrome DevTools per ispezionare il traffico WebSocket. È così che si fa debug dei problemi di comunicazione in tempo reale.

1. Apri DevTools

Fai clic destro su qualsiasi punto della pagina del gioco e seleziona 'Ispeziona', oppure premi F12. Clicca sul tab 'Network' in cima ai DevTools.

2. Filtra per WebSocket

Nel tab Network clicca il pulsante filtro 'WS' (abbreviazione di WebSocket). Nasconde tutte le normali richieste HTTP e mostra solo le connessioni WebSocket.

3. Trova la connessione Socket.io

Ricarica la pagina. Vedrai comparire la connessione WebSocket — cliccaci sopra. Poi clicca sul tab 'Messages'. Mostra in tempo reale ogni messaggio inviato e ricevuto.

4. Osserva il flusso di eventi

Gioca e guarda il tab Messages. Vedrai cose come 'find-game' in uscita (freccia verde) e 'game-start' in arrivo (freccia rossa). Ogni messaggio mostra il nome dell'evento e il payload dei dati. È lo strumento di debug definitivo per Socket.io.

03 · Pratica reale

Apri il WebSocket inspector e verifica di riuscire a vedere il flusso di eventi.

04 · Lista di controllo

Testa questi 8 casi limite. Apri due schede e prova ogni scenario. Se qualcosa si rompe, hai trovato un bug da correggere.

Un giocatore chiude la scheda del browser mentre è in coda nel matchmaking — il server fa pulizia?
Un giocatore chiude la scheda durante la partita — l'avversario vede 'Opponent disconnected'?
Un giocatore clicca su una cella già occupata — non succede niente?
Un giocatore clicca su una cella quando non è il suo turno — non succede niente?
Un giocatore clicca velocemente su più celle — viene registrata solo la prima mossa valida?
La partita finisce con una vittoria — i clic successivi sul tabellone vengono ignorati?
Un giocatore clicca 'Play Again' dopo la partita — il matchmaking riparte pulito?
Tre schede aperte: due in gioco, una che clicca 'Find Game' — il terzo giocatore aspetta correttamente?

05 · Modello di prompt

Che tu abbia trovato bug o meno, chiedi a Claude di revisionare il codice alla ricerca di problemi comuni nei sistemi in tempo reale.

Aiutami a revisionare il codice del mio gioco di tic-tac-toe cercando bug e casi limite. Esamina server.js, game.js, matchmaking.js e public/client.js. Concentrati su: (1) Race condition — cosa succede se due eventi arrivano contemporaneamente? (2) Memory leak — i giocatori disconnessi vengono rimossi da tutte le strutture dati? (3) Inconsistenze di stato — client e server possono andare fuori sincronia? (4) Validazione mancante — un giocatore può inviare una mossa per una partita in cui non si trova? Elenca i problemi trovati e poi correggili.

06 · Leggi

Fare debug del codice in tempo reale è una competenza. Quando qualcosa va storto, il tuo primo strumento è console.log sul server — aggiungi log prima e dopo ogni gestore di eventi. Il secondo strumento è il WebSocket inspector del browser. Il terzo strumento è chiedere a Claude di seguire uno scenario.

La maggior parte dei bug in tempo reale rientra in tre categorie:

1. Riferimenti obsoleti — un giocatore si è disconnesso ma il suo socket è ancora referenziato da qualche parte 2. Pulizia mancante — la partita è finita ma i dati della stanza non vengono eliminati 3. Race condition — due eventi arrivano in un ordine che non ti aspettavi

Se il tuo gioco ha superato i test degli 8 casi limite, è solido. Altrimenti, ora sai esattamente dove guardare.

Punti chiave

console.log sul server è il tuo primo strumento di debug
Il WebSocket inspector nei DevTools è il tuo secondo strumento
La maggior parte dei bug sono riferimenti obsoleti, pulizia mancante o race condition
Se sei bloccato, chiedi a Claude di seguire lo scenario

07 · Quiz

Un giocatore si disconnette durante la partita ma il server non pulisce i suoi dati. Cosa succede quando entra il giocatore successivo?

Il nuovo giocatore potrebbe essere abbinato con il fantasma del giocatore disconnesso, causando una partita rotta
Non succede niente — il server gestisce tutto automaticamente
Socket.io rimuove automaticamente tutti i dati di un socket disconnesso
Il browser riconnette automaticamente il giocatore disconnesso

Altre lezioni di questo capitolo

⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.

※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.