Testar e debugar código em tempo real

Achar e corrigir bugs que só aparecem quando dois jogadores interagem

⏱ Estim. ~10 min

01 · Ler

Seu jogo funciona no happy path — dois jogadores se encontram, jogam por turnos, alguém vence. Mas código multiplayer em tempo real tem uma categoria inteira de bugs que você ainda não enfrentou.

Esses bugs são relacionados a tempo. Só aparecem quando os eventos chegam numa ordem específica, ou quando o jogador faz algo inesperado, como fechar o navegador no meio do jogo. Eles ficam invisíveis nos testes normais porque você está "jogando direito". Devs bons também testam os cenários ruins.

Pontos-chave

Bugs de tempo real dependem de timing — não aparecem em testes normais
Cenários de desconexão são a fonte mais comum de bugs
O Chrome DevTools tem um inspector de WebSocket para debug
Teste os cenários ruins, não só o happy path

02 · Passo a passo

Use o Chrome DevTools para inspecionar o tráfego de WebSocket. É assim que você debuga problemas de comunicação em tempo real.

1. Abrir o DevTools

Clique com o botão direito em qualquer ponto da página do jogo e escolha 'Inspect', ou aperte F12. Clique na aba 'Network', no topo do DevTools.

2. Filtrar por WebSocket

Na aba Network, clique no filtro 'WS' (abreviação de WebSocket). Ele oculta todas as requisições HTTP normais e mostra só as conexões WebSocket.

3. Encontrar a conexão do Socket.io

Recarregue a página. Você vai ver uma conexão WebSocket aparecer — clique nela. Depois clique na aba 'Messages'. Aparece em tempo real cada mensagem enviada e recebida.

4. Observar o fluxo de eventos

Jogue o jogo enquanto olha a aba Messages. Você vai ver coisas como 'find-game' saindo (seta verde) e 'game-start' chegando (seta vermelha). Cada mensagem mostra o nome do evento e o payload. É a ferramenta máxima de debug do Socket.io.

03 · Prática real

Abra o inspector de WebSocket e confirme que você consegue ver o fluxo de eventos.

04 · Lista de verificação

Teste estes 8 casos de borda. Abra duas abas e experimente cada cenário. Se algo quebrar, você achou um bug para corrigir.

Jogador fecha a aba enquanto espera na fila do matchmaking — o servidor faz a limpeza?
Jogador fecha a aba durante a partida — o oponente vê 'Opponent disconnected'?
Jogador clica numa célula já ocupada — não acontece nada?
Jogador clica numa célula fora da própria vez — não acontece nada?
Jogador clica em várias células bem rápido — só a primeira jogada válida é registrada?
Jogo acaba com vitória — cliques subsequentes no tabuleiro são ignorados?
Jogador clica em 'Play Again' após a partida — o matchmaking recomeça limpo?
Três abas abertas: duas em partida, uma clica em 'Find Game' — o terceiro jogador espera corretamente?

05 · Modelo de prompt

Se você achou bugs, ou mesmo que não tenha achado, peça ao Claude para revisar seu código atrás de problemas comuns de tempo real.

Me ajuda a revisar o código do jogo da velha em busca de bugs e casos de borda. Olhe server.js, game.js, matchmaking.js e public/client.js. Foque em: (1) race conditions — o que acontece se dois eventos chegarem ao mesmo tempo? (2) memory leak — jogadores desconectados estão sendo removidos de todas as estruturas de dados? (3) inconsistência de estado — cliente e servidor podem ficar fora de sincronia? (4) validação faltando — um jogador pode enviar uma jogada para um jogo do qual não faz parte? Liste os problemas encontrados e depois corrija.

06 · Ler

Debugar código em tempo real é uma habilidade. Quando algo dá errado, sua primeira ferramenta é console.log no servidor — adicione logs antes e depois de cada handler de evento. A segunda é o inspector de WebSocket do navegador. A terceira é pedir ao Claude para acompanhar o cenário com você.

A maioria dos bugs de tempo real cai em três categorias:

1. Referências obsoletas — o jogador desconectou, mas o socket dele ainda é referenciado em algum lugar 2. Falta de limpeza — o jogo terminou, mas os dados da sala não foram apagados 3. Race conditions — dois eventos chegam numa ordem que você não previu

Se seu jogo passou nos 8 casos de borda, está sólido. Se não, agora você sabe exatamente onde olhar.

Pontos-chave

console.log no servidor é sua primeira ferramenta de debug
O inspector de WebSocket do DevTools é sua segunda ferramenta
A maioria dos bugs é referência obsoleta, falta de limpeza ou race condition
Quando travar, peça ao Claude para acompanhar o cenário

07 · Quiz

Um jogador desconecta no meio do jogo, mas o servidor não limpa os dados dele. O que acontece quando o próximo jogador entra?

O novo jogador pode ser pareado com o fantasma do jogador desconectado e ter um jogo quebrado
Nada — o servidor cuida disso automaticamente
O Socket.io remove sozinho todos os dados de sockets desconectados
O navegador reconecta o jogador desconectado

Outras lições deste capítulo

⚠ A experiência interativa completa precisa de JavaScript. Ative-o e recarregue a página.

※ Este é um projeto educacional independente — não é um produto oficial da Anthropic. Claude™ é uma marca registrada da Anthropic, PBC.