Chrome DevTools「Network タブ」実践ガイド — リクエスト再現・ログ保持・遷移の追跡

目次

リクエストを丸ごと再現する「Copy as cURL」

APIの挙動がおかしい時、トークンやCookieを手動でコピーしていませんか?

Chrome検証ツールにある「Copy as cURL」を使えば、認証情報ごとリクエストを丸ごとコピーして、一瞬で再現できます。

手順

  1. Chrome検証ツール(F12)の「Network」タブを開く
  2. 対象のリクエストを右クリック
  3. Copy > Copy as cURL を選択

これだけで、ヘッダー・Cookie・Bodyを含む全ての情報がクリップボードにコピーされます。

リダイレクトでログが消えるときは Preserve log

検証環境で認証を試していると、リクエストを送った直後にログイン画面へ飛ばされ、Network タブに一瞬だけ表示されたログが消えてしまうことがあります。これは不具合ではなく初期設定どおりの動作で、ドキュメントが読み込み直されると、それまでの記録は破棄されます。

Network タブのツールバーにある Preserve log にチェックを入れると、遷移が起きてもログが 1 つのリストに連続して残ります。同じツールバーの Disable cache も併せて有効にしておくと、キャッシュから返された分の取りこぼしも防げます。

Console は別設定

Console 側にも同名の設定がありますが、Network タブとは連動していません。Console タブ左上の歯車アイコンから設定を開き、そこにある Preserve log を個別に有効化します。遷移直前のエラーを追う場合は両方入れておきます。

Elements Console Sources Network Performance Application 1 Preserve log 2 Disable cache No throttling All Fetch/XHR Doc JS CSS Img Name Status Type Initiator login 3 302 document Other dashboard 200 document Other app.js 200 script Parser me 401 fetch app.js 1 Preserve log 遷移やリダイレクトが起きてもログを残す 2 Disable cache キャッシュ由来の取りこぼしを防ぐ 3 302 の行 クリックして Location ヘッダで遷移先を確認

表示を作業しやすく整える(Overview の非表示)

Network タブを開くと、リクエスト一覧の上に横長の帯グラフが表示されます。これは Overview と呼ばれる領域で、読み込み全体の時間分布を俯瞰したり、ドラッグして特定の時間帯だけを絞り込んだりするためのものです。

ただし、個々のリクエストのヘッダーやレスポンスを追う作業では使う場面がほとんどなく、縦のスペースを 100px 前後占有するだけになります。表示は切り替えられます。ツールバー右端の歯車アイコンから設定パネルを開き、Show overview(日本語 UI では「概要を表示」)のチェックを外します。

歯車の位置と、外すチェック項目は次のとおりです。

Preserve log Disable cache ① 右端の歯車をクリック Big request rows Group by frame Show overview Capture screenshots ② このチェックを 外す

チェックを外した効果は、リクエスト一覧に使える高さにそのまま現れます。ウィンドウの高さが同じでも表示できる行数が増えるため、リクエスト数が多いページで上下スクロールを繰り返す回数が減ります。

Show overview: ON Overview Name Status Type 一覧は 5 行 Show overview: OFF Name Status Type 同じ高さで 8 行

戻したいときは同じ歯車から Show overview にチェックを入れ直すだけです。読み込み時間の内訳を見たいときは Overview を出し、リクエストを一件ずつ追うときは消す、という使い分けになります。

なお、この設定は Network タブ固有のもので、ツールバー左側の Preserve log や Disable cache とは別の場所にあります。同じ歯車パネル内の Capture screenshots や Big request rows も表示量に影響するため、一覧を詰めて見たい場合は併せてオフにしておくと効果が大きくなります。

目次