はじめに
Chrome DevTools（デベロッパーツール）の以下の設定を有効にすると、新しいタブを開いた瞬間から DevTools が起動した状態でページが読み込まれます。
- Settings
- Preferences
- Global
- Auto-open DevTools for pop-ups にチェック
遷移先ページの「最初のリクエスト」を Network タブで漏れなく観察したいときに便利です。
困ったこと
window.open(url, '_blank') でユーザーを別サイトに遷移させる処理を扱っていて、遷移先で送られる初回リクエストを確認したいことがありました。
特に「初回遷移時にだけ起きる現象」を追いたいときは、新しいタブを開いた後に手作業で DevTools を起動するのでは間に合いません。リロードしてしまうと、Referer など初回遷移時にしか取れない情報が変わってしまいます。
解決方法
Chrome DevTools の Auto-open DevTools for pop-ups という設定を有効にすると、新規タブが開いたタイミングで DevTools も自動で開いてくれるため、初回リクエストから記録できます。
設定方法
-
Chrome で DevTools を開く
- Mac：
Cmd + Option + I - Windows / Linux：
F12またはCtrl + Shift + I
- Mac：
-
右上の歯車アイコンから Settings（設定） を開く
-
左メニュー Preferences（環境設定）
-
一番下までスクロール → Global（グローバル） セクション
-
Auto-open DevTools for pop-ups（DevTools をポップアップで自動オープン） にチェック
何が変わるか
| 操作 | 設定OFF | 設定ON |
|---|---|---|
<a target="_blank"> をクリック |
新規タブが開く | 新規タブが DevTools 付きで開く |
window.open(url, '_blank') |
同上 | 同上 |
Network タブの "Preserve log" は別設定
公式ドキュメント上、DevTools は 開いている間のネットワークアクティビティのみ記録する仕様になっています。
Auto-open DevTools for pop-ups で新規タブが開いたタイミングで DevTools も開くため、その後のリクエストは記録対象になります。
より正確に初回リクエストをみたい場合は、合わせて Network タブの設定もしておくといいです。
- Preserve log にチェック：ページ遷移・リロードをまたいで履歴を保持
- Disable cache にチェック：DevTools が開いている間キャッシュを無効化し、初回訪問時と同じリクエストを再現できる
さいごに
-
window.open()やtarget="_blank"先の 初回リクエスト を観察したいときは、「Auto-open DevTools for pop-ups」を ON にする - 初回訪問者が受けるレスポンスを正確に再現したい場合は、Network タブの Disable cache も合わせて ON にしておくとキャッシュの影響を排除できる
参考