ネットワーク機能のリファレンス

Chrome DevTools のネットワーク分析機能のこの包括的なリファレンスで、ページがどのように読み込まれるかを分析する新しい方法をご覧ください。

ネットワーク リクエストを記録する

デフォルトでは、DevTools が開いている限り、DevTools はすべてのネットワーク リクエストを [Network] パネルに記録します。

ネットワーク リクエストの記録を停止する

リクエストの記録を停止するには:

• [ネットワーク] パネルで [ネットワーク ログの記録を停止] をクリックします。色がグレーに変わり、DevTools がリクエストの記録を停止したことを示します。
• [Network] パネルにフォーカスした状態で、Command+E キー（Mac）または Ctrl+E キー（Windows、Linux）を押します。

リクエストを消去する

[Network] パネルで [Clear] をクリックして、[Requests] テーブルからすべてのリクエストを消去します。

ページの読み込み後もリクエストを保存

ページの読み込み後もリクエストを保存するには、[ネットワーク] パネルで [ログを保持] チェックボックスをオンにします。DevTools は、[Preserve log] を無効にするまで、すべてのリクエストを保存します。

ページの読み込み中にスクリーンショットを撮影する

ページの読み込みを待機する間にユーザーに表示されるものを分析するために、スクリーンショットを取得します。

スクリーンショットを有効にするには、[ネットワーク] パネルの [設定] を開き、[スクリーンショットをキャプチャ] をオンにします。

スクリーンショットを取得するために [Network] パネルにフォーカスを設定した状態で、ページを再読み込みします。

取得したスクリーンショットは、以下の方法で操作できます。

• スクリーンショットにカーソルを合わせると、スクリーンショットが取得された時点が表示されます。[概要] タイムラインに黄色い線が表示されます。
• スクリーンショットのサムネイルをクリックすると、スクリーンショットが取得された後に発生したリクエストを除外できます。
• サムネイルをダブルクリックすると、拡大できます。

XHR リクエストのリプレイ

XHR リクエストを再生するには、[Requests] テーブルで次のいずれかを行います。

• リクエストを選択して R を押します。
• リクエストを右クリックし、[Replay XHR] を選択します。

読み込み動作の変更

ブラウザのキャッシュを無効にすることによる、初回訪問者のエミュレート

初めてサイトを訪問するユーザーのエクスペリエンスをエミュレートするには、[キャッシュを無効にする] チェックボックスをオンにします。DevTools により、ブラウザのキャッシュが無効にされます。再訪問時にリクエストがブラウザのキャッシュから提供されるため、初回のユーザー エクスペリエンスをより正確にエミュレートできます。

[ネットワーク状況] ドロワーからブラウザのキャッシュを無効にする

他の DevTools パネルで作業している間にキャッシュを無効にする場合は、[ネットワーク状態] ドロワーを使用します。

1. アイコンをクリックして [ネットワークの状態] ドロワーを開きます。
2. [Disable cache] チェックボックスをオンまたはオフにします。

ブラウザのキャッシュを手動で消去する

ブラウザのキャッシュをいつでも手動でクリアするには、[リクエスト] 表の任意の場所を右クリックして、[ブラウザのキャッシュを消去] を選択します。

オフラインでエミュレート

ウェブアプリの新しいクラスはプログレッシブ ウェブアプリと呼ばれ、Service Worker のサポートによりオフラインで機能できます。このタイプのアプリをビルドする場合、データ接続のないデバイスをすばやくシミュレートできると便利です。

完全にオフラインのネットワーク エクスペリエンスをシミュレートするには、[キャッシュを無効にする] チェックボックスの横にある [ネットワーク スロットリング] プルダウン メニューから [オフライン] を選択します。

DevTools では、オフラインが有効であることを示すために、[Network] タブの横に警告アイコンを表示します。

低速ネットワーク接続をエミュレートする

高速 4G、低速 4G、3G をエミュレートするには、上部にあるアクションバーの [スロットリング] プルダウン メニューから、対応するプリセットを選択します。

DevTools では、スロットリングが有効であることを示すために、[Network] パネルの横に警告アイコンを表示します。

カスタム スロットリング プロファイルを作成する

4G の低速や高速などのプリセットに加えて、独自のカスタム スロットリング プロファイルを追加することもできます。

1. [スロットリング] メニューを開き、[カスタム] > [追加] を選択します。
2. 設定の [Settings] > [Throttling] の説明に沿って、新しいスロットリング プロファイルを設定します。

3. [ネットワーク] パネルに戻り、[スロットリング] プルダウン メニューから新しいプロファイルを選択します。

   

DevTools の [Network] パネルの横に、スロットリングが有効になっていることを知らせる 警告アイコンが表示されます。

WebSocket 接続をスロットリングする

バージョン 99 以降、DevTools は HTTP リクエストに加えて WebSocket 接続もスロットリングします。

WebSocket スロットリングをモニタリングするには:

1. テストツールなどを使用して、新しい接続を開始します。
2. [ネットワーク] パネルで [スロットリングなし] を選択し、接続経由でメッセージを送信します。
3. 非常に遅いカスタム スロットリング プロファイルを作成します（例: 10 kbit/s）。このような低速なプロファイルでは、違いに気付くことができます。
4. [ネットワーク] パネルでプロファイルを選択し、別のメッセージを送信します。
5. [WS] フィルタを切り替え、接続名をクリックして [メッセージ] タブを開き、スロットリングありとスロットリングなしで、送信されたメッセージとエコーされたメッセージの間のタイムラグを確認します。例:

[ネットワーク状況] ドロワーから低速ネットワーク接続をエミュレートする

他の DevTools パネルで作業している間にネットワーク接続をスロットリングする場合は、[ネットワーク状態] ドロワーを使用します。

1. アイコンをクリックして [ネットワークの状態] ドロワーを開きます。
2. [ネットワーク スロットリング] メニューから接続速度を選択します。

ブラウザ Cookie を手動で消去する

ブラウザの cookie を手動でクリアする場合は、いつでも、[リクエスト] 表の任意の場所を右クリックして、[ブラウザの cookie を消去] を選択します。

HTTP レスポンス ヘッダーをオーバーライドする

ローカルでファイルと HTTP レスポンス ヘッダーをオーバーライドするをご覧ください。

ユーザー エージェントをオーバーライドする

ユーザー エージェントを手動でオーバーライドするには:

1. アイコンをクリックして [ネットワークの状態] ドロワーを開きます。
2. [自動的に選択] のチェックボックスをオフにします。
3. メニューからユーザー エージェント オプションを選択するか、ボックスにカスタムのエージェントを入力します。

検索リクエスト

リクエスト ヘッダー、ペイロード、レスポンス全体を検索するには:

1. 次のショートカットを押すと、右側の [検索] タブが開きます。

   • macOS の場合は、Command+F キーを押します。
   • Windows または Linux の場合は Ctrl+F です。

2. [検索] タブでクエリを入力し、Enter キーを押します。必要に応じて、[match_case] または [regular_expression] をクリックして、大文字と小文字を区別または正規表現を有効にします。

3. いずれかの検索結果をクリックします。[ネットワーク] パネルで、一致したリクエストが黄色でハイライト表示されます。また、[Headers] タブまたは [Response] タブが開き、一致した文字列（ある場合）がハイライト表示されます。

検索結果を更新するには、[更新] 更新をクリックします。結果を消去するには、[ブロック] 消去をクリックします。

DevTools で検索できるすべての方法の詳細については、検索: 読み込まれたすべてのリソースでテキストを検索するをご覧ください。

リクエストのフィルタ

プロパティでリクエストをフィルタする

リクエストのドメインやサイズなどのプロパティでリクエストをフィルタリングするには、[フィルタ] ボックスを使用します。

このボックスが表示されない場合は、[フィルタ] バーが非表示になっている可能性があります。フィルタバーを非表示にするをご覧ください。

フィルタを反転するには、[フィルタ] ボックスの横にある [反転] チェックボックスをオンにします。

各プロパティをスペースで区切ることで、複数のプロパティを同時に使用できます。たとえば、mime-type:image/gif larger-than:1K は 1 KB より大きいすべての GIF を表示します。これらの複数のプロパティ フィルタは AND 演算と同等です。OR 演算はサポートされていません。

以下に、サポートされているプロパティの完全なリストを示します。

• cookie-domain。特定のCookie ドメインを設定したリソースを表示します。
• cookie-name。特定のCookie 名を設定したリソースを表示します。
• cookie-path。特定の Cookie パスを設定するリソースを表示します。
• cookie-value。特定のCookie 値を設定したリソースを表示します。
• domain。指定したドメインのリソースのみを表示します。ワイルドカード文字（*）を使用すると、複数のドメインを指定できます。たとえば、*.com は .com で終わるすべてのドメイン名のリソースを表示します。DevTools には、見つかったすべてのドメインを含むオートコンプリート プルダウン メニューが表示されます。
• has-overrides。content、headers、オーバーライド（yes）、オーバーライドなし（no）のいずれかをオーバーライドしたリクエストを表示します。対応する [オーバーライドあり] 列をリクエスト テーブルに追加できます。
• has-response-header。指定した HTTP レスポンス ヘッダーを含むリソースを表示します。DevTools では、見つかったすべてのレスポンス ヘッダーを含むオートコンプリート ドロップダウンが設定されます。
• is。is:running を使用して WebSocket リソースを検索します。
• larger-than。指定されたサイズ（バイト単位）を超えるリソースを表示します。値 1000 の設定は、値 1k の設定と同等です。
• method。指定した HTTP メソッドの種類で取得されたリソースを表示します。DevTools では、見つかったすべての HTTP メソッドを含むオートコンプリート ドロップダウンが設定されます。
• mime-type。指定した MIME タイプのリソースを表示します。DevTools では、見つかったすべての MIME タイプを含むオートコンプリート ドロップダウンが設定されます。
• mixed-content。すべての混在コンテンツ リソース（mixed-content:all）または表示されている混在コンテンツ リソースのみ（mixed-content:displayed）を表示します。
• priority。優先レベルが指定した値と一致するリソースを表示します。
• resource-type。画像などのリソースタイプのリソースを表示します。DevTools では、見つかったすべてのリソースタイプを含むオートコンプリート ドロップダウンが設定されます。
• response-header-set-cookie. [問題] タブに未加工の Set-Cookie ヘッダーを表示します。Set-Cookie ヘッダーが正しくない不正な Cookie は、[ネットワーク] パネルにフラグが付けられます。
• scheme。保護されていない HTTP（scheme:http）または保護された HTTPS（scheme:https）を経由して取得されたリソースを表示します。
• set-cookie-domain。指定された値と一致する Domain 属性を持つ Set-Cookie ヘッダーを持つリソースを表示します。DevTools では、見つかったすべての Cookie ドメインを含むオートコンプリート ドロップダウンが設定されます。
• set-cookie-name。指定した値と一致する名前を持つ Set-Cookie ヘッダーを含むリソースを表示します。DevTools では、見つかったすべての Cookie 名を含むオートコンプリート ドロップダウンが設定されます。
• set-cookie-value。指定した値と一致する値を持つ Set-Cookie ヘッダーを含むリソースを表示します。DevTools により、検出されたすべての Cookie 値が予測入力に入力されます。
• status-code。指定したコードと一致する HTTP ステータス コードを持つリソースのみを表示します。DevTools では、見つかったすべてのステータス コードを含むオートコンプリート ドロップダウン メニューが設定されます。
• url。指定した値と一致する url を持つリソースを表示します。

リクエストを種類別にフィルタ

リソースタイプでリクエストをフィルタリングするには、[ネットワーク] パネルで [すべて]、[Fetch/XHR]、[JS]、[CSS]、[Img]、[Media]、[Font]、[Doc]、[WS]（WebSocket）、Wasm（WebAssembly]、[Manifest）または [Other]（その他）のボタンをクリックします。

これらのボタンが表示されない場合は、[フィルタ] アクションバーが非表示になっている可能性があります。フィルタバーを非表示にするをご覧ください。

複数のタイプのリソースを同時に表示するには、Command キー（Mac）または Control キー（Windows、Linux）を押しながら、複数のタイプのフィルタをクリックします。

時間でリクエストをフィルタする

[概要] タイムラインで左または右にドラッグすると、その期間中にアクティブだったリクエストのみが表示されます。フィルタは包含的です。ハイライト表示されている時間中にアクティブであったリクエストがすべて表示されます。

データの URL を非表示

データ URL は、他のドキュメントに埋め込まれている小さなファイルです。[リクエスト] テーブルに表示されている data: で始まるリクエストは、データ URL です。

これらのリクエストを非表示にするには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [データ URL を非表示にする] を選択します。

下部にあるステータスバーには、リクエストの合計数のうち表示されている件数が表示されます。

拡張機能の URL を表示しない

作成するコードに集中するために、Chrome にインストールした拡張機能から送信される無関係なリクエストを除外できます。拡張機能のリクエストの URL は chrome-extension:// で始まります。

拡張機能のリクエストを非表示にするには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [拡張機能の URL を非表示にする] を選択します。

下部にあるステータスバーには、リクエストの合計数のうち表示されている件数が表示されます。

ブロックされた応答 Cookie が含まれるリクエストのみを表示する

なんらかの理由で応答 Cookie がブロックされたリクエストを除くすべてのリクエストを除外するには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [ブロックされた応答 Cookie] を選択します。こちらのデモページでお試しください。

下部にあるステータスバーには、リクエストの合計数のうち表示されている件数が表示されます。

レスポンス Cookie がブロックされた理由を確認するには、リクエストを選択し、[Cookie] タブを開き、情報アイコン（info）にカーソルを合わせます。

また、[ネットワーク] パネルには、Chrome フラグまたは設定により Cookie がブロックされたリクエストの横に警告アイコンが表示されます。アイコンにカーソルを合わせるとヒントを含むツールチップが表示されます。このアイコンをクリックすると [問題] パネルに移動し、詳細を確認できます。

ブロック中のリクエストのみを表示する

ブロックされたリクエストを除くすべてのリクエストを除外するには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [ブロックされたリクエスト] を選択します。これをテストするには、ドロワーの [ネットワーク リクエストのブロック] タブを使用します。

[リクエスト] テーブルでは、ブロックされたリクエストが赤色でハイライト表示されます。下部にあるステータスバーには、リクエストの合計数のうち表示されている件数が表示されます。

サードパーティのリクエストのみを表示する

ページのオリジンと異なるオリジンのリクエストを除外するには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [サードパーティ リクエスト] を選択します。こちらのデモページでお試しください。

下部のステータスバーには、表示されているリクエストの総数が表示されます。

リクエストの並べ替え

デフォルトでは、[リクエスト] テーブルのリクエストは開始時刻で並べ替えられますが、他の条件を使用してテーブルを並べ替えることもできます。

列で並べ替える

[リクエスト] 表の任意の列のヘッダーをクリックして、その列でリクエストを並べ替えます。

アクティビティ フェーズ順で並べ替え

ウォーターフォールでのリクエストの並べ替え方法を変更するには、リクエスト表のヘッダーを右クリックし、ウォーターフォールにカーソルを合わせ、以下のオプションのうちの 1 つを選択します。

• 開始時刻。最初に開始されたリクエストが先頭になります。
• 応答時間。最初にダウンロードを開始したリクエストが先頭になります。
• [End Time]（終了時間）: 最初に終了したリクエストが先頭になります。
• 合計時間。接続セットアップとリクエスト / レスポンスが最も短いリクエストが先頭になります。
• レイテンシ。レスポンスの待機時間が最も短いリクエストが先頭になります。

これらの説明は、各オプションがそれぞれ最短から最長にランク付けされていることを前提としています。[ウォーターフォール] 列のヘッダーをクリックすると、順序が逆になります。

この例では、ウォーターフォールは合計時間で並べ替えられています。棒グラフの色が薄い部分は待機に費やした時間です。色の濃い部分はバイトのダウンロードに費やされた時間です。

リクエストの分析

DevTools が開いている限り、[Network] パネルにすべてのリクエストのログが記録されます。[ネットワーク] パネルを使用して、リクエストを分析します。

リクエストのログを表示する

[リクエスト] 表を使用して、DevTools が開いている間に行われたすべてのリクエストのログを表示します。リクエストをクリックするか、カーソルを合わせると、それらについての詳細情報が表示されます。

リクエスト表は、デフォルトで以下の列を表示します。

• 名前: リソースのファイル名または ID。

• ステータス。この列には次の値を指定できます。

  

  • HTTP ステータス コード（200、404 など）。
  • クロスオリジン リソース シェアリング（CORS）が原因でリクエストが失敗した場合は CORS error です。
  • ヘッダーの設定が間違っているリクエストの場合は (blocked:origin)。このステータス値にカーソルを合わせると、ツールチップと問題に関するヒントが表示されます。
  • (failed) の後にエラー メッセージが表示されます。

• type:リクエストされたリソースの MIME タイプ。

• イニシエータ。以下のオブジェクトまたはプロセスがリクエストを開始できます。

  • パーサー。Chrome の HTML パーサー。
  • リダイレクト。HTTP リダイレクト。
  • スクリプト。JavaScript 関数。
  • その他。リンクを使ってページを移動したり、アドレスバーに URL を入力するなどの他のいくつかのプロセスまたは操作。

• サイズ。サーバーによって配信されたレスポンス ヘッダーとレスポンス本文の合計サイズ。

• 時間。リクエスト開始からレスポンスの最終バイトを受け取るまでにかかった合計時間。

• ウォーターフォール。各リクエストのアクティビティの視覚的な内訳。

列を追加または削除する

[リクエスト] 表のヘッダーを右クリックして、非表示または表示するオプションを選択します。表示されたオプションの横にチェックマークが表示されます。

次の列を追加または削除できます。パス、URL、メソッド、プロトコル、スキーム、ドメイン、リモート アドレス、リモート アドレス空間、イニシエータ アドレス空間、Cookie、Cookie の設定、優先度、接続 ID、オーバーライドあり、ウォーターフォール。

カスタム列を追加する

Requests テーブルにカスタム列を追加するには:

1. [リクエスト] 表のヘッダーを右クリックし、[レスポンス ヘッダー] > [ヘッダー列を管理] を選択します。
2. ダイアログ ウィンドウで [カスタム ヘッダーを追加] をクリックし、名前を入力して [追加] をクリックします。

リクエストをインライン フレーム別にグループ化

ページ上のインライン フレームが大量のリクエストを開始する場合は、リクエストをグループ化することで、リクエストログをわかりやすくすることができます。

iframe でリクエストをグループ化するには、[ネットワーク] パネル内の [設定] を開き、check_box [フレーム別にグループ化] をオンにします。

インライン フレームによって開始されたリクエストを表示するには、リクエストログでそのリクエストを開きます。

各リクエストの相対的なタイミングの表示

ウォーターフォールを使用して、各リクエストの相対的なタイミングを表示します。デフォルトでは、ウォーターフォールはリクエストの開始時間で並べられています。つまり、左にあるリクエストは、右にあるリクエストよりも早く開始されています。

ウォーターフォールを並べ替える別の方法については、アクティビティ フェーズ順で並べ替えをご覧ください。

WebSocket 接続のメッセージを分析する

WebSocket 接続のメッセージを表示するには:

1. [リクエスト] 表の [名前] 列で、WebSocket 接続の URL をクリックします。
2. [メッセージ] タブをクリックします。表には、最後の 100 件のメッセージが表示されます。

表を更新するには、[リクエスト] 表の [名前] 列にある WebSocket 接続の名前を再度クリックします。

表には、以下の 3 つの列が含まれています。

• Data で定義された列の名前は使用しません。メッセージ ペイロード。メッセージが書式なしテキストの場合、ここに表示されます。バイナリ オペコードの場合、この列にはオペコードの名前とコードが表示されます。サポートされるオペコードは、継続フレーム、バイナリ フレーム、接続クローズ フレーム、Ping フレーム、Pong フレームです。
• 長さ。メッセージ ペイロードの長さ（バイト単位）。
• 時間。メッセージが送受信された時間。

以下のように、メッセージは種類に応じて色分けされます。

• 発信テキスト メッセージは薄い緑。
• 着信テキスト メッセージは白。
• WebSocket オペコードは薄い黄色。
• エラーは薄い赤。

ストリーム内のイベントを分析する

サーバーが Fetch API、EventSource API、XHR を介してストリーミングするイベントを表示するには:

1. イベントをストリーミングするページでネットワーク リクエストを記録します。たとえば、こちらのデモページを開き、3 つのボタンのいずれかをクリックします。
2. [ネットワーク] でリクエストを選択し、[EventStream] タブを開きます。

イベントをフィルタするには、[EventStream] タブの上部にあるフィルタバーで正規表現を指定します。

キャプチャされたイベントのリストを消去するには、[ブロック] 消去をクリックします。

レスポンス本文のプレビューを表示する

レスポンス本文のプレビューを表示するには:

1. [リクエスト] 表の [名前] 列にある、リクエストの URL をクリックします。
2. [プレビュー] タブをクリックします。

このタブは、主にイメージを表示するのに便利です。

レスポンス本文を表示する

リクエストへのレスポンス本文を表示するには:

1. リクエスト表の [名前] 列にある、リクエストの URL をクリックします。
2. [レスポンス] タブをクリックします。

HTTP ヘッダーを表示する

リクエストの HTTP ヘッダーデータを表示するには:

1. [リクエスト] テーブルでリクエストをクリックします。
2. [Headers] タブを開き、[General]、[Response Headers]、[Request Headers] の順にスクロールし、必要に応じて [Early Hints Headers] セクションまでスクロールします。

[全般] セクションでは、受信した HTTP ステータス コードの横に、人が読めるステータス メッセージが表示されます。

[レスポンス ヘッダー] セクションで、ヘッダー値にカーソルを合わせ、編集アイコン 編集ボタンをクリックして、ローカルでレスポンス ヘッダーをオーバーライドできます。

HTTP ヘッダーソースの表示

デフォルトでは、[Headers] タブにはヘッダー名がアルファベット順に表示されます。HTTP ヘッダー名を受信した順に表示するには:

1. 目的のリクエストの [Headers] タブを開きます。HTTP ヘッダーの表示をご覧ください。
2. [Request Header] または [Response Header] セクションの横にある [view source] をクリックします。

一時的なヘッダーに関する警告

[ヘッダー] タブに Provisional headers are shown... 警告メッセージが表示されることがあります。これは、次のいずれかの理由による可能性があります。

• このリクエストはネットワーク経由で送信されておらず、提供元のリクエスト ヘッダーが保存されていないローカル キャッシュから提供されています。この場合は、キャッシュを無効にして、リクエスト ヘッダー全体を表示できます。

• ネットワーク リソースが無効です。たとえば、コンソールで fetch("https://jec.fish.com/unknown-url/") を実行します。

セキュリティ上の理由により、DevTools に一時的なヘッダーのみが表示されることもあります。

リクエストのペイロードを表示する

リクエストのペイロード、つまりクエリ文字列パラメータとフォームデータを表示するには、[リクエスト] テーブルでリクエストを選択し、[ペイロード] タブを開きます。

ペイロードのソースを表示する

デフォルトでは、DevTools にペイロードが人が読める形式で表示されます。

クエリ文字列パラメータとフォームデータのソースを表示するには、[Payload] タブで、[Query String Parameters] または [Form Data] セクションの横にある [view source] をクリックします。

クエリ文字列パラメータの URL デコードされた引数を表示する

引数の URL エンコードを切り替えるには、[ペイロード] タブで [デコードを表示] または [URL エンコードを表示] をクリックします。

Cookie を表示する

リクエストの HTTP ヘッダーで送信された Cookie を表示するには:

1. リクエスト表の [名前] 列にある、リクエストの URL をクリックします。
2. [Cookie] タブをクリックします。

各列の説明については、フィールドをご覧ください。

Cookie を変更するには、Cookie の表示、編集、削除をご覧ください。

リクエストのタイミングの詳細を表示する

リクエストのタイミングの詳細を表示するには:

1. [リクエスト] 表の [名前] 列にある、リクエストの URL をクリックします。
2. [タイミング] タブをクリックします。

このデータにアクセスするより迅速な方法については、タイミングの詳細のプレビューをご覧ください。

[タイミング] タブに表示される各フェーズについて詳しくは、タイミングの詳細フェーズの説明をご覧ください。

タイミングの内訳をプレビューする

リクエストのタイミングの内訳のプレビューを表示するには、リクエスト表の [ウォーターフォール] 列にあるリクエストのエントリにカーソルを合わせます。

カーソルを合わせずに、このデータにアクセスする方法については、リクエストのタイミングの詳細の表示をご覧ください。

タイミングの詳細フェーズの説明

[タイミング] タブに表示される各フェーズについての詳細は以下のとおりです。

• キュー。ブラウザは、接続開始前にリクエストをキューに入れ、次のような場合にキューに入れます。
  • 優先度の高いリクエストがある。
  • このオリジン用に開かれている 6 つの TCP 接続（これが上限です）がすでにある。HTTP/1.0 と HTTP/1.1 にのみ適用されます。
  • ブラウザがディスク キャッシュにスペースを一時的に割り当てている。
• 停止。キューイングで説明されている理由により、接続開始後にリクエストが停止する可能性があります。
• DNS ルックアップ。ブラウザがリクエストの IP アドレスを解決しています。
• 初期接続。ブラウザが接続を確立しています（TCP ハンドシェイク、再試行、SSL のネゴシエーションなど）。
• プロキシのネゴシエーション。ブラウザがリクエストをプロキシ サーバーとネゴシエーションしています。
• リクエストが送信されました。リクエストが送信されています。
• ServiceWorker の準備。ブラウザが Service Worker を起動しています。
• ServiceWorker へのリクエスト。リクエストは Service Worker に送信されています。
• Waiting (TTFB)。ブラウザがレスポンスの最初のバイトを待機しています。TTFB は最初のバイトを受け取るまでの時間（Time To First Byte）の略です。このタイミングには、1 往復のレイテンシとサーバーがレスポンスを準備するのにかかった時間が含まれています。
• [コンテンツのダウンロード] を選択します。ブラウザがネットワークから直接、または Service Worker からレスポンスを受信しています。この値は、レスポンス本文の読み取りに費やされた合計時間です。想定よりも値が大きい場合は、ネットワークが遅いか、ブラウザが他の処理を実行していてレスポンスの読み取りが遅れている可能性があります。

開始元と依存関係を表示する

リクエストの開始元と依存関係を表示するには、Shift キーを押しながら、リクエスト表のリクエストにカーソルを合わせます。DevTools は開始元を緑に、依存関係を赤に設定します。

[リクエスト] テーブルが時系列順に並べられている場合、カーソルを合わせているリクエストの上にある最初の緑色のリクエストが依存関係の開始元です。その上に別の緑色のリクエストがある場合、その上位のリクエストが開始元の開始者です。その他に関しても同様です。

読み込みイベントを表示する

DevTools では、[ネットワーク] パネルの複数の場所に DOMContentLoaded イベントと load イベントのタイミングを表示します。DOMContentLoaded イベントは青色、load イベントは赤色で表示されます。

リクエストの合計数を表示する

リクエストの合計数は、[ネットワーク] パネルの下部にあるステータスバーに表示されます。

転送されたリソースと読み込まれたリソースの合計サイズを表示する

転送され読み込まれた（未圧縮）リソースの合計サイズは、[Network] パネルの下部にあるステータスバーに表示されます。

ブラウザが解凍した後のリソースのサイズを確認するには、リソースの未圧縮サイズの表示をご覧ください。

リクエストが行われたスタック トレースの表示

JavaScript ステートメントが原因でリソースがリクエストされた場合、[Initiator] 列にカーソルを合わせると、そのリクエストが行われたスタック トレースを表示できます。

リソースの未圧縮サイズの表示

[Settings] > [Big request rows] で [Size] 列の一番下の値を確認します。

この例では、ネットワーク経由で送信された www.google.com ドキュメントの圧縮サイズは 43.8 KB ですが、未圧縮サイズは 136 KB です。

リクエスト データのエクスポート

フィルタが適用されたリクエストのリストをエクスポートまたはコピーするには、次の方法があります。

すべてのネットワーク リクエストを HAR ファイルに保存する

HAR（HTTP アーカイブ）は、複数の HTTP セッション ツールでキャプチャ済みデータのエクスポートに使用されるファイル形式です。形式は、特定のフィールド セットを含む JSON オブジェクトです。

機密情報が誤って漏洩する可能性を低減するため、デフォルトでは、Cookie、Set-Cookie、Authorization ヘッダーなどの機密情報を除外した「サニタイズされた」ネットワーク ログを HAR 形式でエクスポートできます。必要に応じて、機密データを含むログをエクスポートすることもできます。

すべてのネットワーク リクエストを HAR ファイルに保存するには、次のいずれかの方法を選択します。

• [リクエスト] 表で任意のリクエストを右クリックし、[コピー] > [[リスト内の] すべてを HAR として保存（除去済み）] または [[リスト内の] すべてを HAR として保存（機密データを含む）] を選択します。

  

• [Network] パネルの上部にあるアクションバーで、[download Export HAR (sanitized)...] をクリックします。

  機密データとともにエクスポートするには、まず設定 [設定] > [設定] > [ネットワーク] > チェックボックス [機密データを含む HAR の生成を許可する] をオンにします。次に、ダウンロード [エクスポート] ボタンを長押しして、[HAR をエクスポート（機密データを含む）] を選択します。

  

HAR ファイルを取得したら、次の 2 つの方法で DevTools にインポートし直して分析できます。

• HAR ファイルを [リクエスト] 表にドラッグ アンド ドロップします。
• [ネットワーク] パネルの上部にあるアクションバーで、[アップロード] [HAR をインポート] をクリックします。

リクエスト、フィルタされたリクエストのセット、またはすべてのリクエストをクリップボードにコピーする

[リクエスト] 表の [名前] 列で、リクエストを右クリックし、[コピー] にカーソルを合わせて、次のいずれかのオプションを選択します。

1 つのリクエスト、そのレスポンス、またはスタック トレースをコピーするには:

• [URL をコピー] をクリックします。リクエストの URL をクリップボードにコピーします。
• cURL としてコピーリクエストを cURL コマンドとしてコピーします。
• PowerShell としてコピー。リクエストを PowerShell コマンドとしてコピーします。
• [フェッチとしてコピー] をクリックします。リクエストをフェッチ呼び出しとしてコピーします。
• フェッチとしてコピー（Node.js）。リクエストを Node.js フェッチ呼び出しとしてコピーします。
• [回答をコピー] をクリックします。レスポンスの本文をクリップボードにコピーします。
• スタック トレースをコピーします。リクエストのスタック トラックをクリップボードにコピーします。

すべてのリクエストをコピーするには:

• すべての URL をコピー。すべてのリクエストの URL をクリップボードにコピーします。
• [すべてを cURL としてコピー] をクリックします。すべてのリクエストを cURL コマンドのチェーンとしてコピーします。
• [すべてを PowerShell 言語でコピー] をクリックします。すべてのリクエストを一連の PowerShell コマンドとしてコピーします。
• すべて取得としてコピー:すべてのリクエストを一連のフェッチ呼び出しとしてコピーします。
• すべてをフェッチとしてコピー（Node.js）します。すべてのリクエストを一連の Node.js フェッチ呼び出しとしてコピーします。
• [すべて HAR（サニタイズ済み）としてコピー] を選択します。Cookie、Set-Cookie、Authorization ヘッダーなどのセンシティブ データなしで、すべてのリクエストを HAR データとしてコピーします。
• すべてを HAR（センシティブ データを含む）としてコピーします。すべてのリクエストをセンシティブ データを含む HAR データとしてコピーします。

フィルタされたリクエストのセットをコピーするには、ネットワーク ログにフィルタを適用し、リクエストを右クリックして以下を選択します。

• リストにあるすべての URL をコピー: フィルタしたすべてのリクエストの URL をクリップボードにコピーします。
• cURL としてリストされているものをすべてコピーします。フィルタされたすべてのリクエストを一連の cURL コマンドとしてコピーします。
• 表示されているものをすべて PowerShell としてコピーします。フィルタされたすべてのリクエストを一連の PowerShell コマンドとしてコピーします。
• フェッチとして表示されているものをすべてコピーします。フィルタされたすべてのリクエストを一連のフェッチ呼び出しとしてコピーします。
• 表示されているものをすべて fetch（Node.js）としてコピーします。フィルタされたすべてのリクエストを一連の Node.js フェッチ呼び出しとしてコピーします。
• HAR（サニタイズ）と記載されているものをすべてコピーします。フィルタされたすべてのリクエストを HAR データとしてコピーします。Cookie ヘッダー、Set-Cookie ヘッダー、Authorization ヘッダーなどの機密データは除外されます。
• HAR（機密データを含む）としてリストされているものをすべてコピーします。フィルタしたリクエストをすべて機密データを含む HAR データとしてコピーする。

[ネットワーク] パネルのレイアウトを変更する

[Network] パネル UI の各セクションを開閉して、重要なことに集中できます。

フィルタ アクション バーを非表示にする

デフォルトでは、DevTools の [Network] パネルの上部に [Filters] バーが表示されます。[filter_alt] [フィルタ] をクリックして非表示にします。

大きなリクエスト行を使用する

ネットワーク リクエスト表により広い空間が必要な場合は、大きい行を使用します。列によっては、大きい行を使用した場合、追加の情報も示されます。たとえば、[Size] 列の下の値はリクエストの未圧縮サイズで、[Priority] 列には最初のフェッチ優先度（下の値）と最後のフェッチ優先度（上の値）の両方が表示されます。

[設定] を開き、[大きなリクエスト行] をクリックして大きな行を表示します。

概要トラックを非表示にする

デフォルトでは、DevTools に [概要] トラックが表示されます。設定アイコン を開き、[概要を表示] チェックボックスをオフにして非表示にします。