測試跟 Debug 即時程式
找跟修只在兩玩家互動時出現的 bug
⏱ 預估 ~10 分鐘
01 · 讀一讀
你遊戲對 happy path 運作 — 兩玩家找到彼此、輪流、有人贏。但即時多人程式有你從沒遇過的整類 bug。
這些 bug 是時間相關。它們只在事件以特定順序到、或玩家做意外事像遊戲中關瀏覽器時出現。它們在正常測試隱形，因為你「好好玩」。好工程師也測醜情境。
重點整理
- 即時 bug 是時間相關 — 不在正常測試出現
- Disconnect 情境是最常見 bug 來源
- Chrome DevTools 有 WebSocket inspector debug
- 測醜情境，不只 happy path
02 · 步驟說明
用 Chrome DevTools 檢查 WebSocket 流量。這是你怎麼 debug 即時溝通問題。
1. 開 DevTools
右鍵你遊戲頁任處選 'Inspect'，或按 F12。點 DevTools 頂端的 'Network' tab。
2. 過濾 WebSocket
Network tab 點 'WS' 過濾按鈕（WebSocket 縮寫）。隱藏所有正常 HTTP 請求、只顯示 WebSocket 連線。
3. 找 Socket.io 連線
重新整理頁。你會看到 WebSocket 連線出現 — 點它。然後點 'Messages' tab。即時顯示每個送跟收的訊息。
4. 看事件流
玩遊戲看 Messages tab。你會看到像 'find-game' 出去（綠箭）跟 'game-start' 進來（紅箭）。每訊息顯示事件名跟資料 payload。這是 Socket.io 終極 debug 工具。
03 · 真機練習
開 WebSocket inspector 確認能看事件流。
04 · 確認清單
測這 8 邊界情況。開兩分頁試每情境。有什麼壞，你找到 bug 修。
- 玩家在 matchmaking queue 等時關瀏覽器分頁 — server 清理嗎？
- 玩家遊戲中關瀏覽器分頁 — 對手看到 'Opponent disconnected' 嗎？
- 玩家點已被佔 cell — 什麼都不發生嗎？
- 玩家在不是他回合時點 cell — 什麼都不發生嗎？
- 玩家快速點多個 cell — 只第一個有效移動註冊嗎？
- 遊戲贏了結束 — 後續棋盤點擊被忽略嗎？
- 玩家遊戲後點 'Play Again' — matchmaking 乾淨重啟嗎？
- 三分頁開：兩在遊戲、一點 'Find Game' — 第三玩家正確等嗎？
05 · Prompt 範本
你找到 bug，或就算沒找到，請 Claude 審你程式找常見即時問題。
幫我審查井字遊戲的程式碼，找出 bug 和邊界情況。請看 server.js、game.js、matchmaking.js 和 public/client.js。重點檢查：（1） Race condition——如果兩個事件同時到達會怎樣？（2） Memory leak——斷線的玩家是否從所有資料結構中清掉了？（3） 狀態不一致——client 和 server 有沒有可能不同步？（4） 缺少的驗證——玩家有沒有可能對自己不在的遊戲送出 move？把你找到的問題列出來，然後修掉。
06 · 讀一讀
Debug 即時程式是技能。有什麼出錯時，你第一個工具是 server 上 console.log — 在每個事件處理器前後加 log。第二工具是瀏覽器 WebSocket inspector。第三工具是請 Claude 追情境。
大部分即時 bug 落三類：
1. 過時參考 — 玩家斷線但他們 socket 還在某處被參考 2. 缺清理 — 遊戲結束但房間資料沒刪 3. 競態條件 — 兩事件以你沒預期順序到
你遊戲過上 8 邊界情況測試，它穩固。不然，現在你確切知道看哪。
重點整理
- Server 上 console.log 是你第一 debug 工具
- DevTools 的 WebSocket inspector 是你第二工具
- 大部分 bug 是過時參考、缺清理、競態條件
- 卡住時請 Claude 追情境
07 · 選擇題
玩家遊戲中斷線但 server 不清理他們資料。下個玩家加入時發生什麼？
- 新玩家可能跟斷線玩家鬼魂配對，造成壞遊戲
- 沒事 — server 自動處理
- Socket.io 自動移除斷線 socket 所有資料
- 瀏覽器會重連斷線玩家
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。