20 日目の記事です。

ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。

そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。

コンソールのログを残す

  1. Console パネルを開く
  2. Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く
  3. “Preserve log” のチェックを入れる

これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。

const eventLogger = (event) => console.log(event.type);;
window.onpagehide = eventLogger;
window.onunload = eventLogger;

Console パネルで Preserve log にチェックを入れ画面遷移した様子。前の画面を閉じる際のログが残っている。

ブレイクポイントが使えるならそっちで

問題がわかってきたら、次はログをどうこうじゃなくて Sources パネルでブレイクポイント仕掛けましょう。画面が変わる前に止めてデバッグできます。

通信のログを残す

たしか初期値はオフだけどチェックボックスは最初から出てます。

  1. Network パネルを開く
  2. ヘッダー部分 “Preserve log” のチェックを入れる

Network パネルで Preserve log を有効化した様子。移動直前に謎の API /getNextUrl を叩いていることがわかる。

リダイレクトは表示される

301 とかで画面遷移するときは、チェック入れなくても元々ログに残るので大丈夫です。

なので使いどころはそうだなあ、たまに広告に載ってくる、不意にリダイレクトするような悪意のあるスクリプトを捜査するときとか。

その他

preserve

主な意味:保存する、維持する、保つ、留める、(…に)漬ける、保護する、守る、禁猟とする

おしまい

location.href をフックできたら楽なんだけどなあ。

参考