debugging

デバッグとトラブルシューティング

MCP ツール

Chrome DevTools（フロントエンドのデバッグ）：

• コンソールエラーとネットワークの失敗をキャプチャします
• ブレークポイントを設定して状態を調べます
• パフォーマンスのボトルネックをプロファイリングします
• エラー状態のスクリーンショットをキャプチャします

ワークフロー

• 再現：問題を安定して再現できますか？
• 切り分け：バグが発生する最小限のコードは何ですか？
• 追跡：Grep を使って呼び出しチェーンをたどります
• 仮説を立てる：この挙動の原因として何が考えられますか？
• テスト：仮説を検証するか、誤りであることを確認します
• 修正：解決策を実装します
• 確認：修正を確認し、リグレッションテストを追加します

デバッグ戦略

1. 情報を集める

• エラーメッセージとスタックトレースを注意深く読みます
• エラーの前後の状況をログで確認します
• 問題がいつ発生し始めたかを特定します（最近の変更が原因ですか？）
• Grep を使ってエラーに関連するコードを探します

2. 処理の流れを追跡する

• Grep を使って、関数呼び出しを通じたデータの流れを追跡します
• エントリーポイントからエラーまでの呼び出しチェーンをマッピングします
• データが予期せず変換される箇所を特定します

3. 一貫して再現する

• 最小限のテストケースを作成します
• 再現するための手順を正確に記録します
• フロントエンドのバグの場合は、Chrome DevTools を使ってネットワーク／コンソールを記録します

4. よくある原因

• Null／undefined：null チェックが不足していないか確認します
• 1つずれたエラー：ループの境界と配列のインデックスを確認します
• 非同期処理のタイミング：競合状態と await の使い方を確認します
• 状態の変更：予期しない副作用がないか調べます
• 型変換：型の扱いを確認します（特に JS／TS）

ツール（言語別の例）

# Check logs
tail -f /var/log/app.log

# Search for error patterns
grep -r "ERROR" ./logs/

# Debug Node.js
node --inspect-brk app.js

# Python debugging
python -m pdb script.py

Chrome DevTools を使ったフロントエンドのデバッグ

• DevTools を開き、Console でエラーを確認します
• Network タブで失敗したリクエストを確認します
• Sources タブでブレークポイントを設定します
• Performance タブで処理の遅い操作を確認します

修正後のチェックリスト

• 根本原因を特定し、記録した
• リグレッションテストを追加した
• 類似するコードを確認した（Grep を使って検索）
• 別の開発者が修正をレビューした