Test and debug realtime code

Find and fix bugs that only appear when two players interact

⏱ Est. ~10 min

01 · Read

Your game works for the happy path — two players find each other, take turns, someone wins. But realtime multiplayer code has a whole class of bugs you've never run into before.

These bugs are timing-related. They only show up when events arrive in a specific order, or when players do something unexpected like closing the browser mid-game. They're invisible in normal testing because you "play nice." Good engineers test the ugly scenarios too.

Key points

Realtime bugs are timing-related — they don't show up in normal testing
Disconnect scenarios are the most common source of bugs
Chrome DevTools has a WebSocket inspector for debugging
Test the ugly scenarios, not just the happy path

02 · Step-through

Use Chrome DevTools to inspect WebSocket traffic. This is how you debug realtime communication problems.

1. Open DevTools

Right-click anywhere on your game page and choose 'Inspect', or press F12. Click the 'Network' tab at the top of DevTools.

2. Filter to WebSocket

In the Network tab, click the 'WS' filter button (short for WebSocket). This hides all the normal HTTP requests and only shows WebSocket connections.

3. Find the Socket.io connection

Refresh the page. You'll see a WebSocket connection appear — click on it. Then click the 'Messages' tab. It shows every message sent and received in realtime.

4. Watch the event flow

Play the game and watch the Messages tab. You'll see events like 'find-game' going out (green arrow) and 'game-start' coming in (red arrow). Each message shows the event name and data payload. This is the ultimate debugging tool for Socket.io.

03 · Real-machine exercise

Open the WebSocket inspector and confirm you can see the event flow.

04 · Checklist

Test these 8 edge cases. Open two tabs and try each scenario. If anything breaks, you've found a bug to fix.

Player closes the browser tab while waiting in the matchmaking queue — does the server clean up?
Player closes the browser tab mid-game — does the opponent see 'Opponent disconnected'?
Player clicks a cell that's already taken — does nothing happen?
Player clicks a cell when it's not their turn — does nothing happen?
Player rapidly clicks multiple cells — does only the first valid move register?
Game ends with a win — are subsequent board clicks ignored?
Player clicks 'Play Again' after a game — does matchmaking restart cleanly?
Three tabs open: two in a game, one clicks 'Find Game' — does the third player wait correctly?

05 · Prompt template

If you found a bug, or even if you didn't, ask Claude to review your code for common realtime issues.

Help me review the tic-tac-toe game code for bugs and edge cases. Look at server.js, game.js, matchmaking.js, and public/client.js. Focus on: (1) Race conditions — what happens if two events arrive at the same time? (2) Memory leaks — are disconnected players cleaned up from all data structures? (3) State inconsistency — could the client and server get out of sync? (4) Missing validation — can a player send a move for a game they're not in? List the issues you find, then fix them.

06 · Read

Debugging realtime code is a skill. When something goes wrong, your first tool is console.log on the server — add logs before and after each event handler. The second tool is the browser's WebSocket inspector. The third tool is asking Claude to trace through the scenario.

Most realtime bugs fall into three categories:

1. Stale references — a player disconnected but their socket is still referenced somewhere 2. Missing cleanup — a game ended but the room data wasn't deleted 3. Race conditions — two events arrived in an order you didn't expect

If your game passes the 8 edge case tests above, it's solid. If it doesn't, you now know exactly where to look.

Key points

console.log on the server is your first debugging tool
The WebSocket inspector in DevTools is your second tool
Most bugs are stale references, missing cleanup, or race conditions
When you're stuck, ask Claude to trace through the scenario

07 · Quiz

A player disconnects mid-game but the server doesn't clean up their data. What happens when the next player joins?

The new player might get paired with the disconnected player's ghost, creating a broken game
Nothing — the server handles it automatically
Socket.io automatically removes all data for disconnected sockets
The browser will reconnect the disconnected player

Other lessons in this chapter

⚠ The full interactive experience needs JavaScript. Please enable it and reload.

※ This is an independent Traditional Chinese teaching project — not an official Anthropic product. Claude™ is a trademark of Anthropic, PBC.