デバッグ支援スキル

デバッグサイクル（5ステップ）

仮説生成 → ログ挿入 → 再現実行 → ログ分析 → 修正適用
                ↑                                 |
                └── 未解決なら仮説を更新して再試行 ──┘

1. 仮説生成

エラー症状と関連コードを分析し、可能性の高い原因を3つリストアップ。 各仮説に優先度・根拠・確認方法を記載。

2. ログ挿入

仮説検証用のログを戦略的に挿入。

ログ規約:

• •プレフィックス: [DEBUG][コンポーネント名]
• •構造化データ: { timestamp, functionName, input, currentState } 形式
• •挿入位置: 関数の入口・中間処理後・catchブロック・出口

3. 再現実行

ユーザーにバグ再現を依頼し、コンソールログを収集。

4. ログ分析

実行順序・タイミング・状態遷移を時系列で分析し、問題箇所を特定。

5. 修正適用

分析結果に基づき最小限の修正を適用。

完了後

1. •[DEBUG] ログをすべて削除
2. •必要に応じてテストを追加

詳細パターン

よくあるデバッグシナリオと解決方法は以下を参照:

• •debug-scenarios.md - React Hooks競合状態、Firestoreリアルタイムリスナー、localStorage/IndexedDB、オフライン復帰、タイマー競合、クリスマスモード切り替え等の典型的バグパターン、ログ挿入例、修正例、予防策