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

Kayce Basques

Sofia Emelianova

Chrome DevTools のネットワーク分析機能の包括的なリファレンスで、ページの読み込みを分析する新しい方法をご確認ください。

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

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

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

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

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

リクエストをクリアする

[ネットワーク] パネルの [クリア] をクリックして、[リクエスト] テーブルからすべてのリクエストをクリアします。

ページ読み込み間でリクエストを保存する

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

ページの読み込み中にスクリーンショットをキャプチャする

スクリーンショットをキャプチャして、ユーザーがページの読み込みを待っている間に何を見ているかを分析します。

スクリーンショットを有効にするには、[Network] パネル内の [Settings] を開き、[Capture screenshots] をオンにします。

[ネットワーク] パネルにフォーカスがある状態でページを再読み込みして、スクリーンショットをキャプチャします。

キャプチャしたスクリーンショットは、次の方法で操作できます。

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

XHR リクエストを再生する

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

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

読み込み動作を変更する

ブラウザのキャッシュを無効にして、新規ユーザーをエミュレートする

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

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

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

1. アイコンをクリックして、[ネットワーク状態] ドロワーを開きます。
2. [キャッシュを無効化] チェックボックスをオンまたはオフにします。

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

ブラウザのキャッシュを手動で削除するには、[リクエスト] テーブルの任意の場所を右クリックして、[ブラウザのキャッシュを消去] を選択します。

オフラインをエミュレートする

プログレッシブ ウェブアプリと呼ばれる新しいクラスのウェブアプリがあります。これは、サービス ワーカーの助けを借りてオフラインで機能します。このタイプのアプリをビルドする際は、データ接続のないデバイスをすばやくシミュレートできると便利です。

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

オフラインが有効になっていることを示す警告アイコンが、[ネットワーク] タブの横に表示されます。

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

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

DevTools の [ネットワーク] パネルの横に 警告アイコンが表示され、スロットリングが有効になっていることがわかります。

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

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

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

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

   

DevTools の [ネットワーク] パネルの横に 警告アイコンが表示され、スロットリングが有効になっていることがわかります。

WebSocket 接続を調整する

DevTools では、バージョン 99 以降、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 キロバイトを超えるすべての 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]、[メディア]、[フォント]、[ドキュメント]、[WS]（WebSocket）、[Wasm]（WebAssembly）、[マニフェスト]、[その他]（ここに記載されていないその他のタイプ）のいずれかのボタンをクリックします。

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

複数のタイプのリソースを同時に表示するには、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] タブを開き、情報アイコンにカーソルを合わせます。

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

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

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

[リクエスト] テーブルでは、ブロックされたリクエストが赤でハイライト表示されます。下部のステータスバーには、表示されているリクエストの数が総数に対して表示されます。

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

ページのオリジンとは異なるオリジンを持つリクエスト以外のすべてをフィルタするには、[フィルタ] アクションバーで、[その他のフィルタ] > check_box [サードパーティのリクエスト] を選択します。

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

リクエストの並べ替え

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

列で並べ替える

[リクエスト] テーブルの任意の列のヘッダーをクリックすると、その列でリクエストを並べ替えることができます。

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

ウォーターフォールでリクエストを並べ替える方法を変更するには、[リクエスト] テーブルの見出しを右クリックして [ウォーターフォール] にカーソルを合わせ、次のいずれかのオプションを選択します。

• 開始時刻。最初に開始されたリクエストが一番上に表示されます。
• 応答時間。ダウンロードを開始した最初のリクエストが一番上に表示されます。
• 終了時刻。完了した最初のリクエストが一番上に表示されます。
• 合計時間。接続のセットアップとリクエスト / レスポンスが最も短いリクエストが一番上に表示されます。
• レイテンシ。レスポンスの待機時間が最も短いリクエストが一番上に表示されます。

以下の説明では、各オプションが短い順に並べられていることを前提としています。[ウォーターフォール] 列のヘッダーをクリックすると、順序が逆になります。

この例では、[ウォーターフォール] は合計時間で並べ替えられています。各バーの明るい部分は、待機時間です。濃い部分はバイトのダウンロードに費やされた時間です。

リクエストの分析

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

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

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

[リクエスト] テーブルには、デフォルトで次の列が表示されます。

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

• ステータス。この列には次の値が表示されます。

  

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

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

• 開始者。次のオブジェクトまたはプロセスはリクエストを開始できます。

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

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

• 時間。リクエストの開始からレスポンスの最後のバイトを受信するまでの合計時間。

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

列を追加または削除する

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

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

カスタム列を追加する

[リクエスト] テーブルにカスタム列を追加するには:

1. [Requests] テーブルのヘッダーを右クリックし、[Response Headers] > [Manage Header Columns] を選択します。
2. ダイアログ ウィンドウで [カスタム ヘッダーを追加] をクリックし、名前を入力して [追加] をクリックします。

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

ページ上のインライン フレームが多数のリクエストを開始する場合、リクエストをグループ化することでリクエストログを使いやすくできます。

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

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

リクエストのタイミングを相互に関連付けて表示する

[ウォーターフォール] を使用すると、リクエストのタイミングを相互に関連付けて確認できます。デフォルトでは、ウォーターフォールはリクエストの開始時刻で整理されます。そのため、左側のリクエストほど早く開始されています。

アクティビティ フェーズで並べ替えるで、ウォーターフォールを並べ替えるさまざまな方法を確認してください。

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

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

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

テーブルを更新するには、[リクエスト] テーブルの [名前] 列にある WebSocket 接続の名前をもう一度クリックします。

テーブルには次の 3 つの列があります。

• Data で定義された列の名前は使用しません。メッセージ ペイロード。メッセージがプレーン テキストの場合は、ここに表示されます。バイナリ オペコードの場合、この列にはオペコードの名前とコードが表示されます。サポートされているオペコードは、Continuation Frame、Binary Frame、Connection Close Frame、Ping Frame、Pong Frame です。
• 長さ。メッセージ ペイロードの長さ（バイト単位）。
• 時間。メッセージの受信または送信時刻。

メッセージは種類に応じて色分けされます。

• 送信テキスト メッセージは薄い緑色で表示されます。
• 受信したテキスト メッセージは白で表示されます。
• WebSocket オペコードは薄い黄色で表示されます。
• エラーは薄い赤色で表示されます。

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

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

1. イベントをストリーミングするページのネットワーク リクエストを記録します。
2. [ネットワーク] でリクエストを選択し、[EventStream] タブを開きます。

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

キャプチャしたイベントのリストをクリアするには、ブロック クリアをクリックします。

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

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

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

このタブは主に画像を表示する際に便利です。

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

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

1. [リクエスト] テーブルの [名前] 列で、リクエストの URL をクリックします。
2. [レスポンス] タブをクリックします。

HTTP ヘッダーを表示する

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

1. [リクエスト] テーブルでリクエストをクリックします。
2. [ヘッダー] タブを開き、[全般]、[レスポンス ヘッダー]、[リクエスト ヘッダー]、必要に応じて [早期ヒント ヘッダー] の各セクションまでスクロールします。

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

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

HTTP ヘッダーのソースを表示する

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

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

暫定ヘッダーの警告

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

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

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

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

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

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

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

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

クエリ文字列パラメータとフォームデータのソースを表示するには、[ペイロード] タブで、[クエリ文字列パラメータ] セクションまたは [フォームデータ] セクションの横にある [ソースを表示] をクリックします。

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

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

Cookie を表示する

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

1. [リクエスト] テーブルの [名前] 列で、リクエストの URL をクリックします。
2. [Cookie] タブをクリックします。

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

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

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

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

1. [リクエスト] テーブルの [名前] 列で、リクエストの URL をクリックします。
2. [タイミング] タブをクリックします。

このデータにすばやくアクセスする方法については、タイミングの内訳をプレビューするをご覧ください。

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

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

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

ホバーせずにこのデータにアクセスする方法については、リクエストのタイミングの内訳を表示するをご覧ください。

タイミング ブレークダウン フェーズの説明

[タイミング] タブに表示されるフェーズの詳細を以下に示します。

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

イニシエータと依存関係を表示する

リクエストのイニシエータと依存関係を表示するには、Shift キーを押しながら、[リクエスト] テーブルでリクエストにカーソルを合わせます。DevTools では、イニシエータは緑色、依存関係は赤色で表示されます。

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

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

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

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

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

注意: 注意: この数値は、DevTools が開いてからログに記録されたリクエストのみを追跡します。DevTools が開かれる前に他のリクエストが発生した場合、それらのリクエストはカウントされません。

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

DevTools の [ネットワーク] パネルの下部にあるステータスバーには、転送および読み込まれた（圧縮されていない）リソースの合計サイズが表示されます。

注意: 注意: この数値は、DevTools が開いてからログに記録されたリクエストのみを追跡します。DevTools が開かれる前に他のリクエストが発生した場合、それらのリクエストはカウントされません。

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

リクエストの原因となったスタック トレースを表示する

JavaScript ステートメントによってリソースがリクエストされた場合は、[イニシエータ] 列にカーソルを合わせると、リクエストにつながるスタック トレースが表示されます。

リソースの非圧縮サイズを表示する

[設定] > [大きなリクエストの行] を確認し、[サイズ] 列の最下部の値を確認します。

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

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

フィルタを適用したリクエストのリストは、次の方法でエクスポートまたはコピーできます。

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

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

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

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

• [リクエスト] テーブル内の任意のリクエストを右クリックし、[コピー] > [[一覧表示] をすべて HAR（サニタイズ済み）として保存] または [[一覧表示] をすべて HAR（機密データを含む）として保存] を選択します。

  

• [ネットワーク] パネルの上部にあるアクションバーで、[ダウンロード] [HAR をエクスポート（サニタイズ済み）...] をクリックします。

  機密データを含めてエクスポートするには、まず、設定 設定 > [設定] > [ネットワーク] > check_box [機密データを含む HAR の生成を許可する] をオンにしてから、ダウンロード エクスポート ボタンをクリックし、プルダウン メニューから [HAR をエクスポート（機密データを含む）] を選択します。

  

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

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

注: [ネットワーク] パネルでは、HAR ファイルからインポートされたリクエストのイニシエータが読み取られ、表示されます。

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

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

単一のリクエスト、レスポンス、スタック トレースをコピーするには:

• [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 コマンドのチェーンとしてコピーします。
• [Copy all listed as fetch（表示されているものをすべてフェッチとしてコピー）] をクリックします。フィルタされたすべてのリクエストをフェッチ呼び出しのチェーンとしてコピーします。
• 表示されているものをすべてフェッチ（Node.js）としてコピーします。フィルタされたすべてのリクエストを Node.js フェッチ呼び出しのチェーンとしてコピーします。
• 表示されているリクエスト（サニタイズ済み）をすべて HAR としてコピーします。フィルタされたすべてのリクエストを、Cookie、Set-Cookie、Authorization ヘッダーなどの機密データを含まない HAR データとしてコピーします。
• 表示されているすべてのリクエスト（センシティブ データを含む）を HAR としてコピーします。フィルタされたすべてのリクエストを、センシティブ データを含む HAR データとしてコピーします。

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

[ネットワーク] パネルの UI のセクションを開閉して、重要な情報に集中できます。

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

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

多数のリクエスト行を使用する

ネットワーク リクエスト テーブルに空白を追加する場合は、大きな行を使用します。大きな行を使用すると、一部の列でより詳細な情報が表示されます。たとえば、[サイズ] 列の下部の値はリクエストの非圧縮サイズで、[優先度] 列には初期（下部の値）と最終（上部の値）の両方のフェッチ優先度が表示されます。

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

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

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