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

Sofia Emelianova
Sofia Emelianova

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

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

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

[Network] パネル。

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

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

  • [ネットワーク] パネルの [ネットワーク ログの記録を停止] ネットワークの録画を停止します。 をクリックします。灰色に変わり、DevTools がリクエストを記録しなくなったことを示します。
  • [Network] パネルにフォーカスを合わせて、command> + E キー(Mac)または control + E キー(Windows、Linux)を押します。

リクエストを消去

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

[消去] ボタン。

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

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

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

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

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

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

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

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

スクリーンショットのキャプチャを有効にしました。

XHR リクエストのリプレイ

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

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

[XHR リプレイ]を選択します。

読み込み動作を変更する

ブラウザ キャッシュを無効にして初回訪問者をエミュレートする

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

[キャッシュを無効にする] チェックボックス。

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

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

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

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

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

[ブラウザ キャッシュを消去] を選択する。

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

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

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

プルダウン メニューで [オフライン] が選択されています。

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

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

低速 3G、高速 3G、その他の接続速度をエミュレートするには、[Throttling] メニューから対応するオプションを選択します。

[ネットワーク スロットリング] メニュー。

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

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

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

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

    スロットリング メニューから選択したカスタム プロファイル。[Network] パネルに警告アイコンが表示されます。

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

WebSocket 接続のスロットル処理

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

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

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

送信され、スロットリングなしでエコーされたメッセージ。

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

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

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

ブラウザの Cookie を手動で削除する

ブラウザの Cookie を手動で消去する場合は、[Requests] テーブルの任意の場所を右クリックして、[Clear browser cookies] を選択します。

[Clear Browser Cookies] を選択する。

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

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

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

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

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

リクエストのフィルタ

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

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

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

[フィルタ] テキスト ボックスと [反転] チェックボックス。

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

各プロパティをスペースで区切ることで、複数のプロパティを同時に使用できます。たとえば、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 で終わるすべてのドメイン名のリソースを表示します。検出されたすべてのドメインを含むオートコンプリート プルダウン メニューが表示されます。
  • has-overridescontentheaders、オーバーライド(yes)、オーバーライドなし(no)のいずれかをオーバーライドしたリクエストを表示します。対応する オーバーライドありをリクエスト テーブルに追加できます。
  • has-response-header。指定された HTTP レスポンス ヘッダーを含むリソースを表示します。DevTools では、見つかったすべてのレスポンス ヘッダーがオートコンプリート プルダウンに入力されます。
  • isis:running を使用して WebSocket リソースを検索します。
  • larger-than。指定したサイズ(バイト単位)より大きいリソースを表示します。1000 の値は、1k の値と同等です。
  • method。指定した HTTP メソッドタイプで取得されたリソースを表示します。オートコンプリート プルダウンに、検出されたすべての 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 を持つリソースを表示します。

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

リクエスト タイプでリクエストをフィルタするには、[ネットワーク] パネルで [All]、[Fetch/XHR]、[JS]、[CSS]、[Img]、[Media]、[Font]、[Doc]、[WS](WebSocket)、Wasm(WebAssembly)、Manifestその他(ここに記載されていないタイプ)ボタンをクリックします。

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

複数の種類のフィルタを同時に有効にするには、command キー(Mac)または Ctrl キー(Windows、Linux)を押しながらクリックします。

タイプフィルタを使用して JS、CSS、Document の各リソースを表示する。

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

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

約 21 ~ 25 ミリ秒アクティブでなかったリクエストを除外する。

データの URL を非表示

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

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

リクエスト テーブルで非表示のデータ URL。

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

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

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

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

リクエスト表で非表示になっている拡張機能の URL。

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

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

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

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

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

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

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

サードパーティ Cookie の段階的廃止の影響を受けるリクエストの横にある警告アイコン。

ブロックされたリクエストのみを表示

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

[リクエスト] の表には、ブロックされたリクエストのみが表示されます。

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

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

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

リクエストの表には、サードパーティのリクエストのみが表示されます。

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

並べ替えリクエスト

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

列で並べ替え

[リクエスト] 表の任意の列のヘッダーをクリックすると、その列でリクエストが並べ替えられます。

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

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

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

これらの説明は、それぞれの選択肢が短いものから長いものの順にランク付けされていることを前提としています。[Waterfall] 列のヘッダーをクリックすると、順序が逆になります。

この例では、Waterfall は合計時間で並べ替えられています。各バーの薄い部分は待機に費やした時間です。暗い部分は、バイトのダウンロードに費やされた時間です。

合計時間でウォーターフォールを並べ替える。

リクエストの分析

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

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

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

リクエスト テーブル。

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

  • 名前: リソースのファイル名または識別子。
  • ステータス:この列には、次の値が表示されます。

    [ステータス] 列の値のさまざまな値。

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

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

    • パーサー。使用できます。
    • リダイレクト。HTTP リダイレクト。
    • スクリプト。JavaScript 関数。
    • その他。リンクを使用したページへの移動やアドレスバーへの URL の入力など、その他のプロセスまたはアクション。
  • サイズ。サーバーから送信されたレスポンス ヘッダーとレスポンス本文の合計サイズ。

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

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

列を追加または削除する

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

リクエスト テーブルに列を追加する。

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

カスタム列を追加する

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

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

リクエスト表にカスタム列を追加する

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

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

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

iframe でグループ化されたリクエストを含むネットワーク リクエスト ログ。

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

リクエスト同士の相対的なタイミングを確認する

ウォーターフォールを使用して、リクエストの相対的なタイミングを確認できます。デフォルトでは、ウォーターフォールはリクエストの開始時間で並べ替えられます。そのため、左にあるリクエストは右端にあるリクエストよりも先に開始されています。

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

[Requests] ペインの [Waterfall] 列

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

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

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

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

[メッセージ] タブ。

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

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

メッセージはタイプに応じて色分けされます。

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

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

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

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

このタブは主に画像の表示に利用できます。

[プレビュー] タブ。

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

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

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

[回答] タブ。

HTTP ヘッダーを表示する

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

  1. [リクエスト] テーブルでリクエストをクリックします。
  2. [Headers] タブを開き、[General]、[Response Headers]、[Request Headers] のいずれかのセクションまでスクロールします。

[Requests] テーブルで選択されたリクエストの [Headers] タブ。

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

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

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

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

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

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

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

  • リクエストはネットワーク経由で送信されず、元のリクエスト ヘッダーが格納されていないローカル キャッシュから配信されました。この場合は、キャッシュを無効にすると完全なリクエスト ヘッダーを表示できます。 一時的なヘッダーの警告メッセージ。

  • ネットワーク リソースが無効です。たとえば、コンソールfetch("https://jec.fish.com/unknown-url/") を実行します。 一時的なヘッダーの警告メッセージ。

DevTools では、セキュリティ上の理由から、一時的なヘッダーのみを表示することもできます。

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

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

[Payload] タブ。

ペイロード ソースを表示

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

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

ソース表示ボタン。

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

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

URL エンコードを切り替えます。

Cookie を表示

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

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

[Cookie] タブ。

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

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

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

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

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

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

[速度] タブ

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

期間の内訳をプレビューする

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

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

リクエストのタイミングの詳細のプレビュー。

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

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

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

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

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

リクエストの開始元と依存関係の表示

Requests テーブルが時系列で並べ替えられている場合、カーソルを合わせているリクエストの上にある最初の緑色のリクエストが、依存関係の開始元です。その上に別の緑色のリクエストがある場合、そのリクエストはイニシエータの開始元です。といった質問に答えることができます。

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

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

[Network] パネルの DOMContentLoaded イベントと load イベントの場所。

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

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

DevTools が開かれてからのリクエストの合計数。

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

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

転送され読み込まれたリソースの合計サイズ。

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

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

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

リソース リクエストに至るまでのスタック トレース。

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

設定アイコン 設定] の順にタップします。 > [Big request rows] をチェックし、[Size] 列の下部にある値を確認します。

非圧縮リソースの例。

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

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

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

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

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

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

HAR ファイルを作成したら、次の 2 つの方法で、分析のために DevTools に再度インポートできます。

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

1 つ以上のリクエストをクリップボードにコピーします

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

  • URL をコピー。リクエストの URL をクリップボードにコピーします。
  • cURL としてコピー。リクエストを cURL コマンドとしてコピーします。
  • PowerShell としてコピー。リクエストを PowerShell コマンドとしてコピーします。
  • Copy as fetch。フェッチ呼び出しとしてリクエストをコピーします。
  • Copy as Node.js fetch。Node.js フェッチ呼び出しとしてリクエストをコピーします。


  • レスポンスをコピー。レスポンスの本文をクリップボードにコピーします。


  • すべての URL をコピー: すべてのリクエストの URL をクリップボードにコピーします。

  • すべてを cURL としてコピーします。すべてのリクエストを一連の cURL コマンドとしてコピーします。

  • すべてを PowerShell としてコピーします。すべてのリクエストを一連の PowerShell コマンドとしてコピーする

  • Copy all as fetch:フェッチ呼び出しのチェーンとしてすべてのリクエストをコピーします。

  • Node.js フェッチとしてすべてをコピーする。Node.js フェッチ呼び出しのチェーンとしてすべてのリクエストをコピーします。

  • すべて HAR としてコピーすべてのリクエストを HAR データとしてコピーします。

[コピー オプション] を選択する。

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

[Network] パネルの UI のセクションは、開いたり閉じたりして、重要なものに集中できます。

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

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

[フィルタを非表示] ボタン。

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

ネットワーク リクエストのテーブルにスペースを増やしたい場合は、大きな行を使用します。大きな行を使用する場合、一部の列では詳細情報が出力されます。たとえば、[Size] 列の下の値はリクエストの非圧縮サイズで、[Priority] 列にはフェッチの初期値(最小値)と最終値(最大値)の両方が表示されます。

設定アイコン 設定] の順にタップします。 を開き、[Big request rows] をクリックして大きな行を表示します。

大きなリクエスト行をオンにしました。

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

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

[概要を表示] チェックボックス。