デバッグ時にバグを再現させる方法

デバッグするときにまず目指すのはバグを100%再現させることだが、調べるとっかかりがないと焦って闇雲にコードを変えてしまったりする。焦らないようにするため、注目する観点を整理する。

画面に関するデバッグ

# 前提
「〇〇画面で××したとき▲になりました(□エラーが出ました)」という感じの報告をもらったとき
  • 1. 画面遷移2. リロードで再現する場合、データの取得処理・state関連処理を疑う
  • 3. 特定の状態4. 特定の要素の場合、その要素関連コードをリバースエンジニアリングする

  • 画面遷移に着目する

    • 〇〇画面を開いたときに再現するか
    • 〇〇画面を閉じたときに再現するか
    • 別画面A → 〇〇画面と遷移したときはどうか
  • リロード
    • 画面表示 → リロードの操作で再現するか
  • 特定の状態
    • ステータスに応じた画面制御
    • バリデーションチェック
    • フォーム入力時 / 入力内容更新時
  • 特定の要素
    • ボタン
    • フォーム
    • テーブル

サーバー処理に関するデバッグ

バックエンド処理のデバッグは処理フローに則った操作を繰り返し、再現するか確かめると良い。

  1. ステータス遷移
    • 遷移順
    • データ更新順序
    • データ更新されたか
  2. 発生頻度
    • 不定期
    • 毎回
    • 特定の場合
  3. フラグ切り替え
    • ON → OFF
    • OFF → ON
  4. トランザクション処理の有無
  5. 単体で再現するか
    • フロントエンドと結合したとき再現する
    • APIリクエストだけで再現する

まずは処理フローを把握し、どんなとき再現するか確認する。

(おまけ)基盤・その他

ミドルウェア以下は設定できていないとそもそも動かない。

  • エラーログをひたすら確認する

原因の大半はコンフィグ設定が間違っているため。なのでエラーログをきちんと読む。