リダイレクトで消えるコンソールログを追いかける方法【Chrome】

「コンソールログで原因を追っていたのに、ページ遷移した瞬間にログが消えてしまって確認できない…」

フロントエンドのデバッグ中、こんな経験はありませんか？

特にログイン処理や OAuth 認証、リダイレクトを伴う画面遷移では、肝心なエラーログが一瞬で消えてしまい、デバッグが詰むこともあります。

今回は Chromeでリダイレクト後もコンソールログを保持する方法 を紹介します。

問題：リダイレクトでログが消える

例えばこんなケースです。

• ログイン処理後に別ページへリダイレクト
• 認証エラーを console.log で出している
• しかし画面遷移と同時にログが消える

結果として「何が起きたのか分からない」状態に陥ります。

解決：DevTools の「ログの保存」を有効にする

Chrome DevTools には、ログを消さずに保持する便利な設定があります。

手順

1. ブラウザで対象ページを開く

2. 以下のいずれかで DevTools を開く

   F12

   右クリック →「検証」

3. 歯車アイコンをクリックし、設定メニューを開く
   

4. Preserve logのチェックボックスをチェック
   

効果

この設定を有効にすると

• ページリロードしてもログが残る

• リダイレクトしてもログが消えない

• 遷移前後の処理を時系列で追える

つまり、

✅ 認証処理の流れ ✅ API通信エラー ✅ 遷移直前の状態

これらを正確に把握できるようになります。

実際の活用シーン

• Auth0 / Firebase / Cognito などの認証デバッグ

• ログイン後の 302 リダイレクト解析

• SPA での突然の画面遷移原因調査

など

まとめ

Chromeでリダイレクト時のログを保持したい場合は

• DevTools を開く

• Console タブを選択

• ✅ Preserve log をオン

たったこれだけで、デバッグ効率が劇的に向上します。

「ログが消えて原因が分からない…」と感じたら、まずここをチェックしてみてください。