Echtzeit-Code testen und debuggen

Bugs finden und fixen, die nur beim Zusammenspiel zweier Spieler auftauchen

⏱ ca. ~10 Min

01 · Lesen

Dein Spiel funktioniert auf dem Happy Path — zwei Spieler finden sich, ziehen abwechselnd, jemand gewinnt. Aber Echtzeit-Multiplayer-Code hat eine ganze Klasse von Bugs, denen du sonst nie begegnest.

Diese Bugs sind timing-abhängig. Sie zeigen sich nur, wenn Events in einer bestimmten Reihenfolge eintreffen oder Spieler etwas Unerwartetes tun, etwa mitten im Spiel den Browser schließen. Beim normalen Testen sind sie unsichtbar, weil du "nett spielst". Gute Entwicklerinnen und Entwickler testen auch die hässlichen Szenarien.

Kernpunkte

Echtzeit-Bugs sind timing-abhängig — sie zeigen sich beim normalen Testen nicht
Disconnect-Szenarien sind die häufigste Bug-Quelle
Die Chrome DevTools haben einen WebSocket-Inspector zum Debuggen
Teste die hässlichen Szenarien, nicht nur den Happy Path

02 · Schritt für Schritt

Untersuche den WebSocket-Verkehr mit den Chrome DevTools. So debuggst du Probleme der Echtzeit-Kommunikation.

1. DevTools öffnen

Rechtsklick irgendwo auf der Spielseite und 'Inspect' wählen, oder F12 drücken. Klick oben in den DevTools auf den Tab 'Network'.

2. Auf WebSocket filtern

Klick im Network-Tab auf den Filter 'WS' (Abkürzung für WebSocket). Das blendet alle normalen HTTP-Requests aus und zeigt nur WebSocket-Verbindungen.

3. Die Socket.io-Verbindung finden

Lade die Seite neu. Du siehst die WebSocket-Verbindung auftauchen — klick sie an. Dann klick auf den Tab 'Messages'. Er zeigt jede gesendete und empfangene Nachricht in Echtzeit.

4. Den Event-Fluss beobachten

Spiel das Spiel und schau dabei auf den Messages-Tab. Du siehst Dinge wie 'find-game' rausgehen (grüner Pfeil) und 'game-start' reinkommen (roter Pfeil). Jede Nachricht zeigt den Event-Namen und die Daten-Payload. Das ist das ultimative Debug-Tool für Socket.io.

03 · Echte Übung

Öffne den WebSocket-Inspector und bestätige, dass du den Event-Fluss siehst.

04 · Checkliste

Teste diese 8 Edge Cases. Öffne zwei Tabs und probier jedes Szenario aus. Bricht etwas, hast du einen Bug zum Fixen.

Ein Spieler schließt den Tab, während er in der Matchmaking-Warteschlange wartet — räumt der Server auf?
Ein Spieler schließt mitten im Spiel den Tab — sieht der Gegner 'Opponent disconnected'?
Ein Spieler klickt auf eine bereits belegte Zelle — passiert nichts?
Ein Spieler klickt eine Zelle, obwohl er nicht dran ist — passiert nichts?
Ein Spieler klickt mehrere Zellen schnell hintereinander — wird nur der erste gültige Zug registriert?
Das Spiel ist gewonnen und beendet — werden weitere Klicks aufs Brett ignoriert?
Ein Spieler klickt nach dem Spiel 'Play Again' — startet das Matchmaking sauber neu?
Drei Tabs offen: zwei im Spiel, einer klickt 'Find Game' — wartet der dritte Spieler korrekt?

05 · Prompt-Vorlage

Hast du Bugs gefunden — oder selbst wenn nicht, lass Claude deinen Code auf typische Echtzeit-Probleme prüfen.

Prüfe bitte den Code meines Tic-Tac-Toe-Spiels auf Bugs und Edge Cases. Schau dir server.js, game.js, matchmaking.js und public/client.js an. Achte besonders auf: (1) Race Conditions — was, wenn zwei Events gleichzeitig eintreffen? (2) Memory-Leaks — werden getrennte Spieler aus allen Datenstrukturen entfernt? (3) Inkonsistenter Zustand — können Client und Server out of sync geraten? (4) Fehlende Validierung — könnte ein Spieler einen Zug für ein Spiel schicken, in dem er nicht ist? Liste die Probleme, die du findest, und fixe sie dann.

06 · Lesen

Echtzeit-Code zu debuggen ist eine Fähigkeit. Geht etwas schief, ist dein erstes Werkzeug console.log auf dem Server — füge Logs vor und nach jedem Event-Handler ein. Das zweite Werkzeug ist der WebSocket-Inspector im Browser. Das dritte Werkzeug ist Claude um eine Szenario-Analyse zu bitten.

Die meisten Echtzeit-Bugs fallen in drei Kategorien:

1. Veraltete Referenzen — ein Spieler hat sich getrennt, aber sein Socket wird irgendwo noch referenziert 2. Fehlendes Cleanup — das Spiel ist vorbei, aber die Raumdaten wurden nicht gelöscht 3. Race Conditions — zwei Events treffen in einer Reihenfolge ein, die du nicht erwartet hast

Übersteht dein Spiel die 8 Edge-Case-Tests oben, ist es solide. Wenn nicht, weißt du jetzt genau, wo du hinschauen musst.

Kernpunkte

console.log auf dem Server ist dein erstes Debug-Tool
Der WebSocket-Inspector der DevTools ist dein zweites
Die meisten Bugs sind veraltete Referenzen, fehlendes Cleanup oder Race Conditions
Steckst du fest, bitte Claude, das Szenario durchzuspielen

07 · Quiz

Ein Spieler trennt sich mitten im Spiel, aber der Server räumt seine Daten nicht auf. Was passiert, wenn der nächste Spieler dazukommt?

Der neue Spieler könnte mit dem Geist eines getrennten Spielers zusammengeführt werden, was ein kaputtes Spiel verursacht
Nichts — der Server kümmert sich automatisch darum
Socket.io entfernt automatisch alle Daten eines getrennten Sockets
Der Browser verbindet den getrennten Spieler wieder

Andere Lektionen aus diesem Kapitel

⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.

※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.