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

Kayce Basques

Sofia Emelianova

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

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

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

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

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

• [Stop recording network log] をクリックします [ネットワーク] パネルで確認できます。灰色に変わり、DevTools がリクエストを記録しなくなったことを示します。
• Command キーを押します。[ネットワーク] パネルにフォーカスした状態で、E キー（Mac）または Ctrl+E キー（Windows、Linux）を押します。

リクエストを消去

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

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

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

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

スクリーンショットをキャプチャして、ページの読み込みを待っているときにユーザーに表示される内容を分析します。

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

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

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

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

XHR リクエストをリプレイ

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

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

読み込み動作を変更する

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

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

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

他の DevTools パネルで作業している間にキャッシュを無効にする場合は、[Network conditions] を使用します。 引き出します。

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

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

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

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

プログレッシブ ウェブアプリという新しいタイプのウェブアプリは、オフラインで機能し、 Service Worker のサポート。このタイプのアプリを作成する場合は、 データ接続がないデバイスをすばやくシミュレートできます。

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

DevTools の [Network] タブの横に、オフラインが有効になっていることを知らせる警告アイコンが表示されます。

遅いネットワーク接続をエミュレートする

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

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

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

低速、高速の 4G などのプリセットのほかに、独自のプリセットを追加することも カスタム スロットリング プロファイル:

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

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

   

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

WebSocket 接続のスロットル

DevTools は、HTTP リクエストだけでなく、バージョン 99 以降の WebSocket 接続もスロットリングします。

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

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

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

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

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

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

ブラウザの Cookie を手動で削除するには、[Requests] テーブルの任意の場所を右クリックして、[ ブラウザの Cookie を消去する。

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

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

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

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

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

検索リクエスト

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

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

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

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

3. 検索結果のいずれかをクリックします。[Network] パネルでは、リクエストと、一致した文字列が [Headers]、[Paload]、または [Response] タブで黄色でハイライト表示されます。

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

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 ヘッダーを表示します。Cookie の形式が正しくありません Set-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 を持つリソースを表示します。

リクエストを種類でフィルタする

リクエスト タイプでリクエストをフィルタするには、[すべて]、[フェッチ/XHR]、[JS]、[CSS]、[イメージ]、[メディア]、 Font、Doc、WS（WebSocket）、Wasm（WebAssembly）、Manifest、Other（ここに記載されていないその他のタイプ） [Network] パネルにボタンを配置します。

これらのボタンが表示されない場合は、[フィルタ] ペインが非表示になっている可能性があります。フィルタの非表示 ペインです。

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

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

[概要] ペインを左右にドラッグして、この期間中にアクティブだったリクエストのみを表示します。 表示されます。フィルタは包含的です。ハイライト表示された期間中にアクティブだったリクエストは 表示されます。

データの URL を非表示

データ URL は、他のドキュメントに埋め込まれた小さなファイルです。このページで data: で始まる Requests テーブルはデータ URL です。

これらのリクエストを非表示にするには、 [データの URL を非表示] をオンにします。

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

拡張機能の URL を非表示にする

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

拡張機能のリクエストを非表示にするには、 [拡張機能の URL を非表示にする] をオンにします。

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

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

なんらかの理由でレスポンス Cookie がブロックされたリクエスト以外のすべてを除外するには、[ Blocked response cookies] をオンにします。こちらのデモページでお試しください。

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

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

また、[ネットワーク] パネルでは、サードパーティ Cookie の段階的廃止の影響を受けている、または除外されたリクエストの横に警告警告アイコンが表示されます。このアイコンにカーソルを合わせると、手がかりを含むツールチップが表示されます。クリックすると [問題] パネルに移動し、詳細を確認できます。

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

ブロックされたリクエスト以外のすべてを除外するには、[ ブロックされたリクエスト] チェックボックスをオンにします。これをテストするには、[ネットワーク リクエストのブロック] ドロワー タブを使用します。

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

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

ページのオリジンと異なるオリジンのリクエストを除くすべてのものを除外するには、 [サードパーティ リクエスト] をチェックします。こちらのデモページでお試しください。

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

リクエストの並べ替え

デフォルトでは、リクエスト テーブルのリクエストは開始時間で並べ替えられますが、 選択することもできます

列で並べ替え

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

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

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

• 開始時刻。最初に開始されたリクエストが先頭に表示されます。
• 応答時間。ダウンロードを開始した最初のリクエストが上部に表示されます。
• 終了時刻。最初に終了したリクエストが一番上になります。
• 合計時間。接続の設定とリクエスト / レスポンスが最も短いリクエストは、 あります。
• レイテンシ。レスポンスの待機時間が最も短いリクエストが先頭になります。

これらの説明は、それぞれの選択肢が短いものから長いものの順にランキングされていることを想定しています。カチカチという音 ウォーターフォール 列のヘッダーでは、順序が逆になります。

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

リクエストの分析

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

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

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

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

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

• ステータス。この列に表示される値は次のとおりです。

  

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

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

• イニシエータ。リクエストを開始できるオブジェクトまたはプロセスは次のとおりです。

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

• サイズ。 あります。

• 時間。リクエストの開始から最後のバイトの受信までの合計時間。 返されます。

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

列を追加または削除する

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

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

カスタム列を追加する

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

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

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

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

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

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

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

リクエストのタイミングを相対的な関係で確認するには、[ウォーターフォール] を使用します。デフォルトでは、 ウォーターフォールは、リクエストの開始時間によって編成されます。左端に近いリクエストは 右に行くほど開始されています

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

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

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

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

テーブルを更新するには、画面の [Name] 列で、WebSocket 接続の名前を再度クリック リクエスト テーブル。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTTP ヘッダーを表示する

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

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

[General] セクションで、受け取った HTTP ステータス コードの横に、人が読める形式のステータス メッセージが表示されます。

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

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

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

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

プロビジョニング済みヘッダーの警告

[Headers] タブに 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. [Requests] テーブルの [Name] 列で、リクエストの URL をクリックします。
2. [タイミング] タブをクリックします。

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

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

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

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

このデータを 表示されます。

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

[タイミング] タブに表示される各フェーズについて、以下で詳しく説明します。

• キューイング。ブラウザは、接続の開始前と次の場合にリクエストをキューに入れます。 <ph type="x-smartling-placeholder">
  </ph>
  • 優先度の高いリクエストがあります。
  • このオリジンに対してすでに 6 つの TCP 接続が開いており、これが上限です。対象 HTTP/1.0 と HTTP/1.1 のみ。
  • ブラウザがディスク キャッシュに容量を一時的に割り当てています。
• 停止。キューで説明されているいずれかの理由で、接続の開始後にリクエストが停止することがあります。
• DNS ルックアップ。ブラウザがリクエストの IP アドレスを解決している。
• 初期接続。ブラウザが TCP handshake や再試行などの接続を確立している SSL のネゴシエーションを 行います
• プロキシ ネゴシエーション。ブラウザは、プロキシ サーバーとリクエストのネゴシエーションを行っています。
• リクエストが送信されました。リクエストを送信しています。
• ServiceWorker の準備ブラウザが Service Worker を起動しています。
• ServiceWorker へのリクエストリクエストは Service Worker に送信されています。
• 待機中（TTFB）。ブラウザはレスポンスの最初のバイトを待機しています。TTFB は Time の略 先頭バイトまで。このタイミングには、レイテンシの 1 ラウンドトリップと、サーバーが応答するまでにかかった時間が含まれます。 レスポンスを準備します。
• コンテンツのダウンロード。ブラウザが、ネットワークから直接、または Service Worker からレスポンスを受信している。この値は、レスポンス本文の読み取りに費やされた合計時間です。想定よりも大きい値は、ネットワークが遅いか、ブラウザが他の処理をビジー状態で実行していて、レスポンスの読み取りが遅れていることを示している可能性があります。

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

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

Requests テーブルが時系列で並べ替えられている場合、そのリクエストの上に カーソルを合わせている部分は、依存関係の開始元です。上に別の緑色のリクエストがある場合 つまり、その上位のリクエストがイニシエータのイニシエータです。その他に関しても同様です。

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

DevTools には、DOMContentLoaded イベントと load イベントのタイミングが [Network] パネル。DOMContentLoaded イベントの色は青色、load イベントは赤色です。

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

リクエストの合計数は、[ネットワーク] パネルの下部にある [概要] ペインに表示されます。

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

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

DevTools では、[Network] パネルの下部にある [Summary] ペインに、転送されて読み込まれた（非圧縮）リソースの合計サイズが表示されます。

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

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

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

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

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

[設定] >大きなリクエスト行を選択してから、[Size] 列の一番下の値を確認します。

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

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

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

HAR（HTTP Archive）は、キャプチャしたデータをエクスポートするためにいくつかの HTTP セッション ツールで使用されるファイル形式です。形式は、特定のフィールド セットを含む JSON オブジェクトです。

すべてのネットワーク リクエストを HAR ファイルに保存するには、次の 2 つの方法があります。

• [Requests] テーブルで任意のリクエストを右クリックし、[Save all as HAR with content] を選択します。
• [Network] パネルの上部にあるアクションバーで、 [Export HAR] をクリックします。

で確認できます。

注: DevTools は、起動後に発生したすべてのリクエストを HAR ファイルにエクスポートします。エクスポートするリクエストをフィルタすることはできません。単一のリクエストを保存するには、1 つ以上のリクエストをクリップボードにコピーするをご覧ください。

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

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

で確認できます。

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

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

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

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

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

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

• すべての URL をコピーします。すべてのリクエストの URL をクリップボードにコピーします。
• すべて cURL としてコピーします。すべてのリクエストを cURL コマンドのチェーンとしてコピーします。
• すべてを PowerShell としてコピーします。すべてのリクエストを一連の PowerShell コマンドとしてコピーする
• すべて取得としてコピー:すべてのリクエストをフェッチ呼び出しのチェーンとしてコピーします。
• すべてをフェッチとしてコピー（Node.js）します。すべてのリクエストを Node.js フェッチ呼び出しのチェーンとしてコピーします。
• すべてを HAR としてコピーします。すべてのリクエストを HAR データとしてコピーします。

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

• リストにあるすべての URL をコピーします。フィルタされたすべてのリクエストの URL をクリップボードにコピーします。
• cURL としてリストされているものをすべてコピーします。フィルタされたすべてのリクエストを cURL コマンドのチェーンとしてコピーします。
• PowerShell として表示されているものをすべてコピーします。フィルタされたすべてのリクエストを一連の PowerShell コマンドとしてコピーする
• 取得としてリストされているすべてをコピーします。フィルタされたすべてのリクエストをフェッチ呼び出しのチェーンとしてコピーする。
• フェッチとしてリストされているすべてをコピーします（Node.js）。フィルタされたすべてのリクエストを Node.js フェッチ呼び出しのチェーンとしてコピーします。
• HAR としてリストされているものをすべてコピーします。フィルタしたリクエストをすべて HAR データとしてコピーする。

[Network] パネルのレイアウトを変更する

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

[フィルタ] ペインを非表示にする

デフォルトでは、DevTools には [Filters] ペインが表示されます。[フィルタ] をクリックします。 非表示にします。

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

ネットワーク リクエスト テーブルの空白文字を増やす場合は、大きな行を使用します。一部の列は 大きな行を使用する場合は、少し情報量を増やします。たとえば、CPU 使用率の最小値に [Size] 列はリクエストの非圧縮サイズです。[Priority] 列には、初期（最小値）と最終（最大値）のフェッチ優先度の両方が表示されます。

設定 を開き、[Big request rows] をクリックして大きい行を表示します。

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

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