Chrome DevTools のネットワーク分析機能の包括的なリファレンスで、ページの読み込み状況を分析する新しい方法をご覧ください。
ネットワーク リクエストを記録する
デフォルトでは、DevTools が開いている間、DevTools はすべてのネットワーク リクエストを [Network] パネルに記録します。
ネットワーク リクエストの記録を停止する
リクエストの記録を停止するには:
- [ネットワーク] パネルの [ネットワーク ログの記録を停止] をクリックします。灰色に変わり、DevTools がリクエストを記録しなくなったことを示します。
- [Network] パネルにフォーカスを合わせて、command> + E キー(Mac)または control + E キー(Windows、Linux)を押します。
リクエストを消去
[ネットワーク] パネルの [消去] をクリックして、[リクエスト] テーブルからすべてのリクエストを消去します。
ページの読み込み後にリクエストを保存する
ページの読み込み後もリクエストを保存するには、[ネットワーク] パネルの [ログを保持] チェックボックスをオンにします。DevTools は、[ログを保持] を無効にするまですべてのリクエストを保存します。
ページの読み込み中にスクリーンショットをキャプチャする
スクリーンショットをキャプチャして、ページの読み込みを待っているユーザーに表示される内容を分析します。
スクリーンショットを有効にするには、[ネットワーク] パネルの [設定] を開き、[スクリーンショットをキャプチャする] チェックボックスをオンにします。
スクリーンショットをキャプチャするには、[Network] パネルにフォーカスがある状態でページを再読み込みします。
キャプチャしたスクリーンショットは、次の方法で操作できます。
- スクリーンショットにカーソルを合わせると、そのスクリーンショットがキャプチャされたポイントが表示されます。[Overview] ペインに黄色の線が表示されます。
- スクリーンショットのサムネイルをクリックして、スクリーンショットの撮影後に発生したリクエストを除外します。
- サムネイルをダブルクリックすると拡大されます。
XHR リクエストのリプレイ
XHR リクエストを再生するには、[Requests] テーブルで次のいずれかを行います。
- リクエストを選択して R キーを押します。
- リクエストを右クリックして [Replay XHR] を選択します。
読み込み動作を変更する
ブラウザ キャッシュを無効にして初回訪問者をエミュレートする
初めてアクセスするユーザーのサイトをエミュレートするには、[キャッシュを無効にする] チェックボックスをオンにします。 DevTools がブラウザ キャッシュを無効にします。これにより、リクエストは再訪問時にブラウザ キャッシュから提供されるため、初めてのユーザー エクスペリエンスをより正確にエミュレートできます。
[ネットワーク条件] ドロワーからブラウザ キャッシュを無効にする
他の DevTools パネルで作業中にキャッシュを無効にするには、[ネットワーク条件] ドロワーを使用します。
- アイコンをクリックして [ネットワーク状態] ドロワーを開きます。
- [キャッシュを無効にする] チェックボックスをオンまたはオフにします。
ブラウザのキャッシュを手動で削除する
ブラウザのキャッシュを手動で削除するには、[Requests] テーブルの任意の場所を右クリックして、[Clear browser cache] を選択します。
オフラインでエミュレート
プログレッシブ ウェブアプリという新しいクラスのウェブアプリが登場します。プログレッシブ ウェブアプリは、Service Worker を利用してオフラインで機能できます。このタイプのアプリをビルドする場合、データ接続がないデバイスをすばやくシミュレートできると便利です。
完全にオフラインのネットワークをシミュレートするには、[キャッシュを無効にする] チェックボックスの横にある [ネットワーク スロットリング] プルダウン メニューから [オフライン] を選択します。
DevTools の [Network] タブの横に、オフラインが有効になっていることを示す警告アイコンが表示されます。
低速のネットワーク接続をエミュレートする
低速 3G、高速 3G、その他の接続速度をエミュレートするには、[Throttling] メニューから対応するオプションを選択します。
DevTools の [Network] タブの横に、スロットリングが有効になっていることを示す警告アイコンが表示されます。
カスタム スロットリング プロファイルを作成する
低速または高速の 3G などのプリセットに加えて、独自のカスタム スロットリング プロファイルを追加することもできます。
- [スロットリング] メニューを開き、[カスタム] > [追加...] を選択します。
- 設定の [設定] > [スロットリング] の説明に沿って、新しいスロットリング プロファイルを設定します。
[Network] パネルに戻り、[Throttling] プルダウン メニューから新しいプロファイルを選択します。
DevTools の [Network] パネルの横に 警告アイコンが表示され、スロットリングが有効になっていることが示されます。
WebSocket 接続のスロットル処理
バージョン 99 以降、DevTools では HTTP リクエストに加えて WebSocket 接続がスロットリングされます。
WebSocket スロットリングをモニタリングするには:
- テストツールなどを使用して、新しい接続を開始します。
- [ネットワーク] パネルで [スロットリングなし] を選択し、接続を介してメッセージを送信します。
- 非常に遅いカスタム スロットリング プロファイル(
10 kbit/s
など)を作成します。プロファイルがこのように遅いと、違いに気づくことができます。 - [Network] パネルでプロファイルを選択し、別のメッセージを送信します。
- WS フィルタを切り替え、接続名をクリックし、[メッセージ] タブを開いて、スロットリングを適用したメッセージとエコーメッセージの時間差を確認します。次に例を示します。
[ネットワーク状態] ドロワーから低速のネットワーク接続をエミュレートする
他の DevTools パネルで作業中にネットワーク接続をスロットリングする場合は、[Network conditions] ドロワーを使用します。
- アイコンをクリックして [ネットワーク状態] ドロワーを開きます。
- [ネットワーク スロットリング] メニューから接続速度を選択します。
ブラウザの Cookie を手動で削除する
ブラウザの Cookie を手動で消去する場合は、[Requests] テーブルの任意の場所を右クリックして、[Clear browser cookies] を選択します。
HTTP レスポンス ヘッダーをオーバーライドする
ファイルと HTTP レスポンス ヘッダーをローカルでオーバーライドするをご覧ください。
ユーザー エージェントをオーバーライドする
ユーザー エージェントを手動でオーバーライドするには:
- アイコンをクリックして [ネットワーク状態] ドロワーを開きます。
- [自動選択] をオフにします。
- メニューからユーザー エージェント オプションを選択するか、ボックスにカスタム エージェント オプションを入力します。
リクエストのフィルタ
プロパティでリクエストをフィルタする
[フィルタ] ボックスを使用して、ドメインやサイズなどのプロパティでリクエストをフィルタします。
このボックスが表示されない場合は、[フィルタ] ペインが非表示になっている可能性があります。[フィルタ] ペインを非表示にするをご覧ください。
フィルタを反転するには、[フィルタ] ボックスの横にある [反転] チェックボックスをオンにします。
各プロパティをスペースで区切ることで、複数のプロパティを同時に使用できます。たとえば、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-overrides
。content
、headers
、オーバーライド(yes
)、オーバーライドなし(no
)のいずれかをオーバーライドしたリクエストを表示します。対応する オーバーライドあり列をリクエスト テーブルに追加できます。has-response-header
。指定された HTTP レスポンス ヘッダーを含むリソースを表示します。DevTools では、見つかったすべてのレスポンス ヘッダーがオートコンプリート プルダウンに入力されます。is
。is: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)を押しながらクリックします。
リクエストを時間でフィルタ
[概要] ペインを左右にドラッグして、その期間中にアクティブだったリクエストのみを表示します。フィルタは範囲に含まれます。ハイライト表示された時間帯にアクティブであったリクエストが表示されます。
データの URL を非表示
データ URL は、他のドキュメントに埋め込まれている小さなファイルです。[リクエスト] テーブルに表示されている data:
で始まるリクエストは、データ URL です。
このリクエストを非表示にするには、 [データの URL を非表示] チェックボックスをオンにします。
一番下のステータスバーには、表示されているリクエストの合計数のうち、表示されているものが表示されます。
拡張機能の URL を非表示にする
作成したコードに焦点を合わせるには、Chrome にインストールした拡張機能から送信された無関係なリクエストを除外します。拡張機能のリクエストの URL は chrome-extension://
で始まります。
拡張機能のリクエストを非表示にするには、[ 拡張機能の URL を非表示にする] チェックボックスをオンにします。
一番下のステータスバーには、表示されているリクエストの合計数のうち、表示されているものが表示されます。
ブロックされたレスポンス Cookie が含まれるリクエストのみを表示する
なんらかの理由でレスポンス Cookie がブロックされるリクエストを除くすべてを除外するには、 [レスポンス Cookie がブロックされる] チェックボックスをオンにします。こちらのデモページでお試しください。
一番下のステータスバーには、表示されているリクエストの合計数のうち、表示されているものが表示されます。
レスポンス Cookie がブロックされた理由を確認するには、リクエストを選択して [Cookie] タブを開き、 情報アイコンにカーソルを合わせます。
また、[ネットワーク] パネルでは、サードパーティ Cookie の段階的廃止の影響を受けるリクエストや除外されたリクエストの横に、警告警告アイコンが表示されます。アイコンにカーソルを合わせると、ヒントが記載されたツールチップが表示されます。クリックすると [Issues] パネルに移動して詳細を確認できます。
ブロックされたリクエストのみを表示
ブロックされたリクエストを除くすべてを除外するには、 [ブロックされたリクエスト] チェックボックスをオンにします。これをテストするには、[ネットワーク リクエストのブロック] ドロワータブを使用します。
[リクエスト] の表では、ブロックされたリクエストが赤色でハイライト表示されます。一番下のステータスバーには、表示されているリクエストの合計数のうち、表示されているものが表示されます。
サードパーティのリクエストのみを表示
ページのオリジンとは異なるオリジンのリクエストを除くすべてを除外するには、 サードパーティ リクエストを確認します。こちらのデモページでお試しください。
一番下のステータスバーには、表示されているリクエストの合計数のうち、表示されているものが表示されます。
並べ替えリクエスト
デフォルトでは、[リクエスト] テーブルのリクエストは開始時間で並べ替えられますが、他の条件を使用してテーブルを並べ替えることもできます。
列で並べ替え
[リクエスト] 表の任意の列のヘッダーをクリックすると、その列でリクエストが並べ替えられます。
アクティビティのフェーズで並べ替え
[Waterfall] によるリクエストの並べ替え方法を変更するには、リクエスト テーブルのヘッダーを右クリックし、[Waterfall] にカーソルを合わせて次のいずれかのオプションを選択します。
- 開始時間。最初に開始されたリクエストが一番上に表示されます。
- 応答時間。ダウンロードを開始した最初のリクエストが一番上に表示されます。
- 終了時間。完了した最初のリクエストが最上部に表示されます。
- Total Duration:接続設定とリクエスト / レスポンスが最も短いリクエストが最上部に表示されます。
- レイテンシ。レスポンスの待機時間が最も短いリクエストが一番上になります。
これらの説明は、それぞれの選択肢が短いものから長いものの順にランク付けされていることを前提としています。[Waterfall] 列のヘッダーをクリックすると、順序が逆になります。
この例では、Waterfall は合計時間で並べ替えられています。各バーの薄い部分は待機に費やした時間です。暗い部分は、バイトのダウンロードに費やされた時間です。
リクエストの分析
DevTools が開いている限り、すべてのリクエストが [ネットワーク] パネルに記録されます。リクエストを分析するには、[ネットワーク] パネルを使用します。
リクエストのログを表示する
[Requests] テーブルを使用すると、DevTools が開いている間に行われたすべてのリクエストのログを表示できます。リクエストをクリックするか、カーソルを合わせると、そのリクエストに関する詳細情報が表示されます。
リクエスト テーブルには、デフォルトで次の列が表示されます。
- 名前: リソースのファイル名または識別子。
ステータス:この列には、次の値が表示されます。
- HTTP ステータス コード(
200
、404
など)。 - クロスオリジン リソース シェアリング(CORS)が原因でリクエストの
CORS error
が失敗しました。 (blocked:origin)
: ヘッダーが正しく構成されていないリクエストの場合。このステータス値にカーソルを合わせると、エラーのヒントを示すツールチップが表示されます。(failed)
に続いてエラー メッセージが表示されます。
- HTTP ステータス コード(
type:リクエストされたリソースの MIME タイプ。
Initiator。リクエストを開始できるオブジェクトまたはプロセスは次のとおりです。
- パーサー。使用できます。
- リダイレクト。HTTP リダイレクト。
- スクリプト。JavaScript 関数。
- その他。リンクを使用したページへの移動やアドレスバーへの URL の入力など、その他のプロセスまたはアクション。
サイズ。サーバーから送信されたレスポンス ヘッダーとレスポンス本文の合計サイズ。
Time。リクエストの開始からレスポンスの最後のバイトの受信までの合計時間。
ウォーターフォール。各リクエストのアクティビティの視覚的な内訳。
列を追加または削除する
[Requests] 表のヘッダーを右クリックして、表示と非表示のオプションを選択します。表示されたオプションの横にはチェックマークが付いています。
[パス]、[URL]、[メソッド]、[プロトコル]、[スキーム]、[ドメイン]、[リモート アドレス]、[リモート アドレス空間]、[イニシエータのアドレス空間]、[Cookie]、[Cookie の設定]、[優先度]、[接続 ID]、[オーバーライドあり]、[ウォーターフォール] の列を追加または削除できます。
カスタム列を追加する
Requests テーブルにカスタム列を追加するには:
- [Requests] テーブルのヘッダーを右クリックし、[Response Headers] > [Manage Header Columns] を選択します。
- ダイアログ ウィンドウで [カスタム ヘッダーを追加] をクリックし、名前を入力して [追加] をクリックします。
インライン フレーム別にリクエストをグループ化する
ページ上のインライン フレームから多くのリクエストが開始される場合は、それらのフレームをグループ化することで、リクエストログを見やすくすることができます。
iframe でリクエストをグループ化するには、[ネットワーク] パネル内の [設定] を開き、 [フレームでグループ化] をオンにします。
インライン フレームによって開始されたリクエストを表示するには、リクエストログ内でフレームを展開します。
リクエスト同士の相対的なタイミングを確認する
ウォーターフォールを使用して、リクエストの相対的なタイミングを確認できます。デフォルトでは、ウォーターフォールはリクエストの開始時間で並べ替えられます。そのため、左にあるリクエストは右端にあるリクエストよりも先に開始されています。
ウォーターフォールを並べ替えるさまざまな方法については、アクティビティ フェーズで並べ替えるをご覧ください。
WebSocket 接続のメッセージを分析する
WebSocket 接続のメッセージを表示するには:
- [リクエスト] テーブルの [名前] 列で、WebSocket 接続の URL をクリックします。
- [メッセージ] タブをクリックします。この表には、直近の 100 件のメッセージが表示されます。
テーブルを更新するには、[リクエスト] テーブルの [名前] 列にある WebSocket 接続の名前を再度クリックします。
このテーブルには次の 3 つの列があります。
- Data で定義された列の名前は使用しません。メッセージ ペイロード。メッセージが書式なしテキストの場合は、ここに表示されます。バイナリ オペコードの場合、この列にはオペコードの名前とコードが表示されます。サポートされているオペコードは、継続フレーム、バイナリ フレーム、接続クローズ フレーム、Ping フレーム、Pong フレームです。
- 長さ。メッセージ ペイロードの長さ(バイト単位)。
- Time。メッセージが受信または送信された時刻。
メッセージはタイプに応じて色分けされます。
- 発信テキスト メッセージは薄い緑色になります。
- 受信したテキスト メッセージは白色になります。
- WebSocket オペコードは薄い黄色です。
- エラーは薄い赤色で表示されます。
ストリーム内のイベントを分析する
サーバーが Fetch API、EventSource API、XHR を介してストリーミングするイベントを表示するには:
- イベントをストリーミングするページで、ネットワーク リクエストを記録します。たとえば、こちらのデモページを開き、3 つのボタンのいずれかをクリックします。
- [ネットワーク] でリクエストを選択し、[イベントストリーム] タブを開きます。
イベントをフィルタするには、[EventStream] タブの上部にあるフィルタバーで正規表現を指定します。
キャプチャされたイベントのリストを消去するには、ブロックの [消去] をクリックします。
レスポンス本文のプレビューを表示する
レスポンス本文のプレビューを表示するには:
- [リクエスト] テーブルの [名前] 列で、リクエストの URL をクリックします。
- [プレビュー] タブをクリックします。
このタブは主に画像の表示に利用できます。
レスポンス本文を表示する
リクエストに対するレスポンスの本文を表示するには:
- リクエスト表の [名前] 列で、リクエストの URL をクリックします。
- [Response] タブをクリックします。
HTTP ヘッダーを表示する
リクエストの HTTP ヘッダーデータを表示するには:
- [リクエスト] テーブルでリクエストをクリックします。
- [Headers] タブを開き、[General]、[Response Headers]、[Request Headers]、および必要に応じて [Early Hints Headers] セクションまで下にスクロールします。
[General] セクションの DevTools では、受信した HTTP ステータス コードの横に、人が読める形式のステータス メッセージが表示されます。
[Response Headers] セクションでヘッダー値にカーソルを合わせて [Edit] の [Edit] ボタンをクリックすると、レスポンス ヘッダーをローカルでオーバーライドできます。
HTTP ヘッダーのソースを表示する
デフォルトでは、[Headers] タブにはヘッダー名がアルファベット順に表示されます。HTTP ヘッダー名を受信した順に表示するには:
- 目的のリクエストの [Headers] タブを開きます。HTTP ヘッダーの表示をご覧ください。
- [Request Header] または [Response Header] セクションの横にある [ソースを表示] をクリックします。
一時的なヘッダーに関する警告
[Headers] タブに Provisional headers are shown...
警告メッセージが表示される場合があります。これは、次のいずれかの理由による可能性があります。
リクエストはネットワーク経由で送信されず、元のリクエスト ヘッダーが格納されていないローカル キャッシュから配信されました。この場合は、キャッシュを無効にすると完全なリクエスト ヘッダーを表示できます。
ネットワーク リソースが無効です。たとえば、コンソールで
fetch("https://jec.fish.com/unknown-url/")
を実行します。
DevTools では、セキュリティ上の理由から、一時的なヘッダーのみを表示することもできます。
リクエスト ペイロードを表示する
リクエストのペイロード、つまりクエリ文字列パラメータやフォームデータを表示するには、[Requests] テーブルからリクエストを選択して [Payload] タブを開きます。
ペイロード ソースを表示
デフォルトでは、DevTools は人が読める形式でペイロードを表示します。
クエリ文字列パラメータとフォームデータのソースを表示するには、[ペイロード] タブで、[クエリ文字列パラメータ] セクションまたは [フォームデータ] セクションの横にある [ソースを表示] をクリックします。
クエリ文字列パラメータの URL デコードされた引数を表示する
引数の URL エンコードを切り替えるには、[ペイロード] タブで、[デコードされた表示] または [URL エンコードを表示] をクリックします。
Cookie を表示
リクエストの HTTP ヘッダーで送信された Cookie を表示するには:
- リクエスト表の [名前] 列で、リクエストの URL をクリックします。
- [Cookie] タブをクリックします。
各列の説明については、フィールドをご覧ください。
Cookie を変更するには、Cookie を表示、編集、削除するをご覧ください。
リクエストのタイミングの詳細を表示する
リクエストのタイミングの詳細を表示するには:
- [リクエスト] テーブルの [名前] 列で、リクエストの URL をクリックします。
- [速度] タブをクリックします。
このデータにすばやくアクセスする方法については、タイミングの内訳をプレビューするをご覧ください。
[タイミング] タブに表示される各フェーズの詳細については、タイミングの内訳のフェーズの説明をご覧ください。
期間の内訳をプレビューする
リクエストのタイミングの詳細のプレビューを表示するには、リクエスト テーブルの [ウォーターフォール] 列のリクエストのエントリにカーソルを合わせます。
カーソルを合わせる必要がないデータにアクセスする方法については、リクエストのタイミングの詳細を表示するをご覧ください。
タイミングの詳細フェーズの説明
[タイミング] タブに表示される各フェーズの詳細は次のとおりです。
- キュー。ブラウザは、接続の開始前と次のタイミングでリクエストをキューに入れます。
- 優先度の高いリクエストがあります。
- このオリジンに対してすでに開いている 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
イベントは赤色です。
リクエストの合計数を表示する
リクエストの合計数は、[ネットワーク] パネルの下部にある [概要] ペインに表示されます。
転送され読み込まれたリソースの合計サイズを表示する
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] を選択します。
- [Network] パネルの上部にあるアクションバーで、 [Export 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] トラックが表示されます。設定アイコン を開き、[概要を表示] チェックボックスをオフにして非表示にします。