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

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

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

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

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

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

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

リクエストをクリアする

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

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

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

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

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

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

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

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

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

リクエストを編集して再送信する

[Requests] テーブルから、取得可能なネットワーク リクエストを編集して再送信できます。

1. リクエストを右クリックして、[Edit and resend as fetch] を選択します。DevTools で [Console] ドロワーが開き、リクエストが fetch() 呼び出しとして入力されます。元のリクエスト パラメータと実行コンテキストは保持されます。
2. 必要に応じて、コンソールで fetch() 呼び出しを編集し、Enter キーを押してリクエストを再送信します。

読み込み動作を変更する

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

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

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

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

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

ブラウザ キャッシュを手動でクリアする

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

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

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

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

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

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

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

[パフォーマンス] パネルで [フィールド指標] がオンになっている場合、メニューのスロットリング オプションの 1 つが、Chrome ユーザー エクスペリエンス レポートのデータに基づいて推奨としてマークされることがあります。

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

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

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

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

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

   

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

WebSocket 接続をスロットルする

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

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

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

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

他の DevTools パネルで作業中にネットワーク接続を調整する場合は、[ネットワーク条件] ドロワーを使用します。

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

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

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

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

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

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

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

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

リクエストを検索

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

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

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

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

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

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

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

リクエストのフィルタ

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

[フィルタ] ボックスを使用して、リクエストのドメインやサイズなどのプロパティでリクエストをフィルタするか、テキスト文字列を入力して、同一サイトのリクエストを含むリクエスト URL、ドメイン、ホスト名、ポート（localhost や example.com など）を照合します。

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

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

複数のプロパティを同時に使用するには、各プロパティをスペースで区切ります。たとえば、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 を持つリソースを表示します。

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

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

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

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

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

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

データ URL を非表示にする

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

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

下部のステータスバーには、合計数に対する表示されたリクエストの数が表示されます。

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

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

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

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

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

何らかの理由でレスポンス Cookie がブロックされたリクエスト以外のすべてをフィルタで除外するには、[フィルタ] アクションバーで [その他のフィルタ] > check_box [ブロックされたレスポンス Cookie] を選択します。

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

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

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

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

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

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

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

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

下部のステータスバーには、合計数に対する表示されたリクエストの数が表示されます。

リクエストを並べ替える

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

列で並べ替え

[リクエスト] テーブルの列見出しをクリックすると、その列を基準にリクエストを並べ替えることができます。

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

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

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

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

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

リクエストの分析

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

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

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

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

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

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

  

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

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

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

  • パーサー。Chrome の HTML パーサー。
  • リダイレクト。HTTP リダイレクト。
  • スクリプト。JavaScript 関数。この場合、[ネットワーク] パネルには、ソースファイル内の対応する行へのリンクが表示されます。
  • 早期ヒント。HTTP 103 Early Hints レスポンス。
  • その他。リンクを使用してページに移動する、アドレスバーに URL を入力するなど、他のプロセスまたはアクション。

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

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

• ウォーターフォール。各リクエストのアクティビティを視覚的に分類したもの。

列を追加または削除する

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

次の追加の列を追加または削除できます。

• リクエスト番号。リクエスト開始の絶対順序。デフォルトでは、[リクエスト] テーブルの最初の位置に固定されています。
• パス。URL のパス部分。
• URL。リクエストの完全な URL。
• 方法。リクエストの HTTP メソッド（GET、POST、PUT、DELETE など）。
• プロトコル。リクエストのプロトコル（HTTP/2 の場合は h2、HTTP/3 の場合は h3 など）。
• スキーム。URL のスキーム部分。
• ドメイン。URL のドメイン部分。
• リモート アドレス。リクエストのリモート IP アドレスとポート。
• リモート アドレス空間。リクエストのリモート アドレス空間。パブリック IP の場合は Public、プライベート IP の場合は Private。
• イニシエーターのアドレス空間。リクエストのイニシエーターのアドレス空間。リモコンと同じです。
• Cookie。リクエスト内の Cookie の数。
• Cookie を設定する。レスポンス内の Cookie の数。
• 優先度。リクエストの優先度。
• 接続 ID。クライアント セッションのリクエストの接続 ID（ある場合）。
• オーバーライドあり。リクエストにオーバーライドがあるかどうか（あり、なし、コンテンツ、ヘッダー）。
• 広告に関連している。正しいか、誤りかを答えてください。
• プリロード済み。リクエストが投機的プリロードを使用して開始されたかどうか。
• レンダリング ブロック。リクエストがレンダリングをブロックしているか、ブロックしている可能性があるか、またはブロックしていないか。
• ウォーターフォール。各リクエストのアクティビティを視覚的に分類した情報。

カスタム列を追加する

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

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

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

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

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

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

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

[ウォーターフォール] を使用して、リクエストのタイミングを相互に比較します。デフォルトでは、ウォーターフォールはリクエストの開始時間で並べ替えられます。つまり、左側にあるリクエストは、右側にあるリクエストよりも早く開始されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このタブは、主に画像の表示に役立ちます。

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

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

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

バイナリまたは圧縮されたレスポンスの場合は、[Response] タブの下部にあるプルダウン メニューからデコード方法（[Base64]、[Hex]、[UTF-8]）を選択します。

HTTP ヘッダーを表示する

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

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

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

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

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

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

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

暫定ヘッダーに関する警告

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

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

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

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

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

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

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

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

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

URL エンコードされたクエリ パラメータとフォーム パラメータを表示する

デフォルトでは、DevTools はクエリ文字列パラメータとフォームデータを URL デコードされた形式で表示します。[ペイロード] タブで引数の URL エンコードを切り替えるには、[エンコードされた URL を表示] または [デコードされた URL を表示] をクリックします。

バイナリ ペイロードと圧縮ペイロードを表示する

バイナリまたは圧縮されたリクエスト ペイロードの場合は、[Payload] タブの下部にあるプルダウン メニューからデコード方法（[Base64]、[Hex]、[UTF-8]）を選択します。

Cookie を表示する

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

1. [リクエスト] テーブルの [名前] 列でリクエストを選択します。
2. [Cookie] タブを開きます。

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

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

デバイスにバインドされたセッションを表示する

[デバイスにバインドされたセッション] タブには、サイト上のすべてのアクティブなデバイスにバインドされたセッションについて、選択したリクエストに関連付けられている遅延（更新）情報が表示されます。

延期（更新）情報を表示するには:

1. [リクエスト] テーブルの [名前] 列でリクエストを選択します。
2. [デバイス バインド セッション] タブを開きます。

[デバイスにバインドされたセッション] タブは、Cookie を含む関連するリクエストに対してのみ表示されます。このタブには、アクティブなデバイス バインド セッションがすべて一覧表示され、セッションがリクエストを延期したかどうか（延期しなかった場合はその理由）が表示されます。可能な延期オプションは次のとおりです。

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

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

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

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

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

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

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

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

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

タイミングの内訳フェーズの説明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リクエスト データをエクスポートする

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

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

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

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

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

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

  

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

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

  

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

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

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

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

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

• URL をコピー。リクエストの URL をクリップボードにコピーします。
• [Copy as cURL] を選択します。リクエストを cURL コマンドとしてコピーします。
• [Copy as PowerShell] をクリックします。リクエストを PowerShell コマンドとしてコピーします。
• fetch としてコピー。リクエストを fetch 呼び出しとしてコピーします。
• [fetch としてコピー（Node.js）] をクリックします。リクエストを Node.js の fetch 呼び出しとしてコピーします。
• [プリロード要素としてコピー] を選択します。リクエストを <link rel="preload"> HTML タグとしてコピーします。
• 回答をコピーします。レスポンスの本文をクリップボードにコピーします。
• スタック トレースをコピー。リクエストのスタック トレースをクリップボードにコピーします。

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

• Copy all URLs。すべてのリクエストの URL をクリップボードにコピーします。
• すべて cURL としてコピー。すべてのリクエストを cURL コマンドのチェーンとしてコピーします。
• [Copy all as PowerShell] をクリックします。すべてのリクエストを PowerShell コマンドのチェーンとしてコピーします。
• [Copy all as fetch] を選択します。すべてのリクエストをフェッチ呼び出しのチェーンとしてコピーします。
• Copy all as fetch (Node.js)。すべてのリクエストを Node.js のフェッチ呼び出しのチェーンとしてコピーします。
• [Copy all as HAR (sanitized)] を選択します。Cookie、Set-Cookie、Authorization ヘッダーなどのセンシティブ データを含まない HAR データとして、すべてのリクエストをコピーします。
• すべてを HAR（センシティブ データを含む）としてコピーします。すべてのリクエストをセンシティブ データを含む HAR データとしてコピーします。

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

• 表示されている URL をすべてコピー。フィルタされたすべてのリクエストの URL をクリップボードにコピーします。
• [Copy all listed as cURL]。フィルタされたすべてのリクエストを cURL コマンドのチェーンとしてコピーします。
• 表示されているものをすべて PowerShell としてコピー。フィルタされたすべてのリクエストを PowerShell コマンドのチェーンとしてコピーします。
• [Copy all listed as fetch] を選択します。フィルタされたすべてのリクエストを fetch 呼び出しのチェーンとしてコピーします。
• fetch（Node.js）として表示されているものをすべてコピーします。フィルタされたすべてのリクエストを Node.js の fetch 呼び出しのチェーンとしてコピーします。
• [Copy all listed as HAR (sanitized)] を選択します。フィルタされたすべてのリクエストを、Cookie、Set-Cookie、Authorization ヘッダーなどのセンシティブ データを含まない HAR データとしてコピーします。
• 表示されているすべてのリクエスト（センシティブ データを含む）を HAR としてコピーします。フィルタされたすべてのリクエストを、センシティブ データを含む HAR データとしてコピーします。

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

[ネットワーク] パネルの UI のセクションを開閉して、重要な項目に注目します。

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

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

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

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

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

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

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