JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目）

DRANK

ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。コンソールのログを残すConsole パネルを開くConsole パネル右上のコンソールの設定ボタンを押し、設定欄を開く“Preserve log” のチェックを入れるこれで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。const eventLogger = (event) => console.log(event.type);; window.onpagehide = eventLogger; window.onunload = eventLogger; Console パネルで Preserve log にチェックを入れ画面遷移した様子。前の画面を閉じる際のログが残っている。ブレイクポイントが使えるならそっちで問題がわかってきたら、次はログをどうこうじゃなくて Sources パネルでブレイクポイント仕掛けましょう。画面が変わる前に止めてデバッグできます。通信のログを残すたしか初期値はオフだけどチェックボックスは最初から出てます。Network パネルを開くヘッ…