Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

ネットワーク分析リファレンス

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

注: このリファレンスは Chrome 58 に基づいています。別のバージョンの Chrome を使用している場合、DevTools の UI と機能が異なる場合があります。 どのバージョンの Chrome を実行しているかを確認するには、chrome://help をチェックしてください。

ネットワーク リクエストの記録

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

[Network] パネル。
図 1。 [Network] パネル

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

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

  • [Network] パネルで [Stop recording network log] Stop recording network log をクリックします。 {: .devtools-inline } それは灰色に変わり、DevTools がリクエストの記録を停止したことを示します。
  • [Network] パネルにフォーカスを設定した状態で、Command キー+E(Mac)または Control キー+E(Windows、Linux)を押します。

リクエストのクリア

リクエスト表からすべてのリクエストをクリアするために、[Network] パネルで [Clear] Clearをクリックします。{:.devtools-inline}

[Clear] ボタン。
図 2。 青い枠で示されている [Clear]

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

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

[Preserve Log] チェックボックス。
図 3。 青い枠で示されている [Preserve Log] チェックボックス

ページの読み込み中のスクリーンショットの取得

ページの読み込みを待機する間にユーザーに表示されるものを分析するために、スクリーンショットを取得します。

スクリーンショットを有効にするには、[Network] パネルで [Capture screenshots] Capture screenshots をクリックします。 {: .devtools-inline } 有効になると青色に変わります。

スクリーンショットを取得するために [Network] パネルにフォーカスを設定した状態で、ページを再読み込みします。

取得したスクリーンショットは、以下の方法で操作できます。

  • スクリーンショットにカーソルを合わせると、スクリーンショットが取得された時点が表示されます。 Overview ペインには黄色い線が表示されます。
  • スクリーンショットのサムネイルをクリックすると、スクリーンショットが取得された後に発生したリクエストを除外できます。
  • サムネイルをダブルクリックすると、拡大できます。
スクリーンショットにカーソルを合わせる。
図 4。 スクリーンショットにカーソルを合わせる。 [Overview] ペインの黄色の縦線とウォーターフォールはスクリーンショットが取得された時点を表しています。

XHR リクエストのリプレイ

XHR リクエストをリプレイするには、リクエスト表でリクエストを右クリックし、[Replay XHR] を選択します。

[Replay XHR] の選択。
図 5。 [Replay XHR] の選択

読み込み動作の変更

ブラウザのキャッシュを無効にすることによる、初回訪問者のエミュレート

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

[Disable Cache] チェックボックス。
図 6。 青い枠で示されている [Disable Cache] チェックボックス

[Network Conditions] ドロワーからブラウザのキャッシュを無効にする

他の DevTools パネルで作業している間にキャッシュを無効にする場合は、[Network Conditions] ドロワーを使用します。

  1. [Network Conditions] ドロワーを開きます。
  2. [Disable Cache] チェックボックスをオンまたはオフにします。

ブラウザのキャッシュの手動でのクリア

ブラウザのキャッシュを手動でクリアする場合は、いつでも、リクエスト表の任意の場所を右クリックして [Clear Browser Cache] を選択します。

[Clear Browser Cache] の選択。
図 7。 [Clear Browser Cache] の選択

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

プログレッシブ ウェブアプリと呼ばれる新しい種類のウェブアプリがあります。これは Service Worker を利用してオフラインで動作できます。 この種のアプリを構築する場合、データ接続のない端末を簡単にシミュレートできると便利です。

[Offline] チェックボックスをオンにして、完全にオフラインのネットワーク エクスペリエンスをシミュレートします。

[Offline] チェックボックス
図 8。 青い枠で示されている [Offline] チェックボックス

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

[Network Throttling] メニューから 2G、3G、およびその他の接続速度をエミュレートします。

[Network Throttling] メニュー。
図 9。 青い枠で示されている [Network Throttling] メニュー。

Regular または Good 2G などのさまざまなプリセットから選択できます。 [Network Throttling] メニューを開いて、[Custom] > [Add] を選択することにより、独自のカスタム プリセットを追加することもできます。

DevTools では、スロットリングが有効であることを示すために、[Network] タブの横に警告アイコンを表示します。

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

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

  1. [Network Conditions] ドロワーを開きます。
  2. [Network Throttling] メニューから希望の接続速度を選択します。

ブラウザの cookie の手動でのクリア

ブラウザの cookie を手動でクリアする場合は、いつでも、リクエスト表の任意の場所を右クリックして、[Clear Browser Cookies] を選択します。

[Clear Browser Cookies] の選択。
図 10。 [Clear Browser Cookies] の選択

ユーザー エージェントのオーバーライド

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

  1. [Network Conditions] ドロワーを開きます。
  2. [Select automatically] チェックボックスをオフにします。
  3. メニューからユーザー エージェント オプションを選択するか、テキスト ボックスにカスタム オプションを入力します。

リクエストのフィルタ処理

プロパティでのリクエストのフィルタ処理

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

テキスト ボックスが表示されない場合、おそらく [Filters] ペインが非表示になっています。 [Filters] ペインの非表示をご覧ください。

[Filters]テキスト ボックス。
図 11。 青い枠で示されている [Filters] テキスト ボックス

各プロパティをスペースで区切ることで、複数のプロパティを同時に使用できます。 たとえば、mime-type:image/gif larger-than:1K は 1 KB より大きいすべての GIF を表示します。 これらの複数のプロパティ フィルタは AND 演算と同等です。 OR 演算は現在サポートされていません。

以下は、サポートされているプロパティの完全なリストです。

  • domain。 指定したドメインのリソースのみを表示します。 複数のドメインを含めるには、ワイルドカード文字(*)を使用します。 たとえば、*.com はドメイン名が .com で終わるすべてのドメインのリソースを表示します。 DevTools では、見つかったすべてのドメインを含むオートコンプリート ドロップダウン メニューが設定されます。
  • has-response-header。 指定した HTTP レスポンス ヘッダーを含むリソースを表示します。 DevTools では、見つかったすべてのレスポンス ヘッダーを含むオートコンプリート ドロップダウンが設定されます。
  • isis:running を使用して、WebSocket リソースを検索します。
  • larger-than。 指定したサイズ(バイト単位)よりも大きいリソースを表示します。 値 1000 を設定するのと値 1k を設定するのは同じです。
  • method。 指定した HTTP メソッドの種類で取得されたリソースを表示します。 DevTools では、見つかったすべての HTTP メソッドを含むドロップダウンが設定されます。
  • mime-type。 指定した MIME タイプのリソースを表示します。 DevTools では、見つかったすべての MIME タイプを含むドロップダウンが設定されます。
  • mixed-content。 すべての混在コンテンツ リソース(mixed-content:all)または現在表示されている混在コンテンツ リソースのみ(mixed-content:displayed)を表示します。
  • 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 では、見つかったすべてのステータス コードを含むオートコンプリート ドロップダウン メニューが設定されます。

タイプでのリクエストのフィルタ処理

リクエスト タイプでリクエストをフィルタ処理するには、[Network] パネルで、[XHR]、[JS]、[CSS]、[Img]、[Media]、[Font]、[Doc]、[WS] (WebSocket)、[Manifest]、または [Other] (ここにリストされていないその他のタイプ)ボタンをクリックします。

これらのボタンが表示されない場合、おそらく [Fillter] ペインが非表示になっています。 [Filters] ペインの非表示をご覧ください。

複数のタイプのフィルタを同時に使用可能にするには、Command キー(Mac)または Control キー(Windows、Linux)を押したままクリックします。

タイプフィルタを使用して、JS、CSS、および Doc (文書)リソースを表示する。
図 12。 タイプフィルタを使用して、JS、CSS、および Doc (文書)リソースを表示する。

時間でのリクエストのフィルタ処理

Overview ペインで、クリックして左または右にドラッグすることで、そのタイムフレーム中にアクティブであったリクエストのみを表示します。 フィルタの時間も含まれます。 ハイライト表示されている時間中にアクティブであったリクエストがすべて表示されます。

2500ms 周辺でアクティブではなかったリクエストの除外。
図 13。 2500ms 周辺でアクティブではなかったリクエストの除外

データ URL の非表示

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

[Hide data URLs] チェックボックスをオンにして、これらのリクエストを非表示にします。

[Hide Data URLs] チェックボックス。
図 14。 [Hide Data URLs] チェックボックス

リクエストの並べ替え

デフォルトでは、リクエスト表のリクエストは開始時間で並べ替えられていますが、他の基準を使用して表を並べ替えることができます。

列順で並べ替え

リクエストの任意の列のヘッダーをクリックして、その列でリクエストを並べ替えます。

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

ウォーターフォールでのリクエストの並べ替え方法を変更するには、リクエスト表のヘッダーを右クリックし、カーソルを [Waterfall] に合わせ、以下のオプションのうちの 1 つを選択します。

  • Start Time。 最初に開始されたリクエストが先頭になります。
  • Response Time。 最初にダウンロードを開始したリクエストが先頭になります。
  • End Time。 最初に終了したリクエストが先頭になります。
  • Total Duration。 接続セットアップおよびリクエスト / レスポンスが最も短いリクエストが先頭になります。
  • Latency。 レスポンスの待機時間が最も短いリクエストが先頭になります。

これらの説明は、各オプションがそれぞれ最短から最長にランク付けされていることが前提です。 [Waterfall] 列のヘッダーをクリックすると、順序が逆になります。

合計時間によるウォーターフォールの並べ替え。
図 15。 合計時間によるウォーターフォールの並べ替え。 棒グラフの色の薄い部分は待機に費やした時間です。 色の濃い部分は、バイトのダウンロードに費やした時間です。

リクエストの分析

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

リクエストのログの表示

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

リクエスト表。
図 16。 青い枠で示されているリクエスト表

リクエスト表は、デフォルトで以下の列を表示します。

  • Name。 リソースのファイル名または ID。
  • Status。 HTTP ステータス コード。
  • Type。 リクエストされたリソースの MIME タイプ。
  • Initiator。 以下のオブジェクトまたはプロセスがリクエストを開始できます。
    • Parser。 Chrome の HTML パーサー。
    • Redirect。 HTTP リダイレクト。
    • Script。 JavaScript 関数。
    • Other。 リンクを使ってページを移動したり、アドレスバーに URL を入力するなどの他のいくつかのプロセスまたは操作。
  • Size。 サーバーから配信された時のレスポンス ヘッダーとレスポンス本文の合計サイズ。
  • Time。 リクエスト開始からレスポンスの最終バイトを受け取るまでにかかった合計時間。
  • Waterfall。 各リクエストの操作の視覚的詳細。

列の追加または削除

リクエスト表のヘッダーを右クリックして、それを非表示または表示するオプションを選択します。 現在表示されているオプションには、それらの横にチェックマークがあります。

リクエスト表への列の追加。
図 17。 リクエスト表への列の追加。

カスタム列の追加

リクエスト表にカスタム列を追加するには、リクエスト表のヘッダーを右クリックし、[Response Headers] > [Manage Header Columns] を選択します。

リクエスト表にカスタム列を追加。
図 18。 リクエスト表にカスタム列を追加。

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

ウォーターフォールを使用して、各リクエストの相対的なタイミングを表示します。 デフォルトでは、ウォーターフォールはリクエストの開始時間を基準に並べられています。 つまり、左側のリクエストは、右側のリクエストより早く開始されています。

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

[Requests] ペインの [Waterfall] 列。
図 19。 [Requests] ペインの [Waterfall] 列。

WebSocket 接続のフレームの分析

WebSocket 接続のフレームを表示するには:

  1. リクエスト表の [Name] 列にある、WebSocket 接続の URL をクリックします。
  2. [Frames] タブをクリックします。 表には、最後の 100 フレームが表示されます。

表を更新するには、リクエスト表の [Name] 列にある WebSocket 接続の名前を再度クリックしてください。

[Frames] タブ。
図 20。 青い枠で示されている [Frames] タブ

表には、以下の 3 つの列が含まれています。

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

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

  • 発信テキスト メッセージは薄い緑。
  • 着信テキスト メッセージは白。
  • WebSocket オペコードは薄い黄色。
  • エラーは薄い赤。

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

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

  1. リクエスト表の [Name] 列にある、リクエストの URL をクリックします。
  2. [Preview] タブをクリックします。

このタブは、主にイメージを表示するのに便利です。

[Preview] タブ。
図 21。 青い枠で示されている [Preview] タブ

レスポンス本文の表示

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

  1. リクエスト表の [Name] 列にある、リクエストの URL をクリックします。
  2. [Response] タブをクリックします。
[Response] タブ。
図 22。 青い枠で示されている [Response] タブ

HTTP ヘッダーの表示

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

  1. リクエスト表の [Name] 列にある、リクエストの URL をクリックします。
  2. [Headers] タブをクリックします。
[Headers] タブ。
図 23. 青い枠で示されている [Headers] タブ

HTTP ヘッダーソースの表示

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

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

クエリ文字列パラメータの表示

URL のクエリ文字列パラメータを人の読める形式で表示するには:

  1. 対象のリクエストの [Headers] タブを開きます。 HTTP ヘッダーの表示をご覧ください。
  2. [Query String Parameters] セクションに移動します。
[Query String Parameters] セクション。
図 24. 青い枠で示されている [Query String Parameters] セクション

クエリ文字列パラメータ ソースの表示

リクエストのクエリ文字列パラメータ ソースを表示するには:

  1. [Query String Parameters] セクションに移動します。 クエリ文字列パラメータの表示をご覧ください。
  2. [view source] をクリックします。

URL エンコードされたクエリ文字列パラメータの表示

クエリ文字列パラメータを人の読める形式で、エンコードを保持したまま表示するには:

  1. [Query String Parameters] セクションに移動します。 クエリ文字列パラメータの表示をご覧ください。
  2. [view URL encoded] をクリックします。

Cookie の表示

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

  1. リクエスト表の [Name] 列にある、リクエストの URL をクリックします。
  2. [Cookies] タブをクリックします。

各列の説明については、項目をご覧ください。

[Cookies] タブ。
図 25. 青い枠で示されている [Cookies] タブ

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

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

  1. リクエスト表の [Name] 列にある、リクエストの URL をクリックします。
  2. [Timing] タブをクリックします。

このデータにアクセスするより迅速な方法については、タイミングの詳細のプレビューをご覧ください。

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

[Timing] タブ。
図 26. 青い枠で示されている [Timing] タブ

各フェーズについての詳細は以下のとおりです。

このビューにアクセスする別の方法については、タイミングの詳細の表示をご覧ください。

タイミングの詳細のプレビュー

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

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

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

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

[Timing] タブに表示される各フェーズについての詳細は以下のとおりです。

  • Queueing。 以下の場合にブラウザがリクエストをキューイングします。
    • 優先度の高いリクエストがある。
    • このオリジン用に開かれている 6 つの TCP 接続(これが上限です)がすでにある。 HTTP/1.0 および HTTP/1.1 にのみ適用されます。
    • ブラウザがディスク キャッシュにスペースを一時的に割り当てている。
  • Stalled。 [Queueing] で説明されている理由のためリクエストが滞る可能性があります。
  • DNS Lookup。 ブラウザがリクエストの IP アドレスを解決しています。
  • Proxy negotiation。 ブラウザがリクエストをプロキシ サーバーとネゴシエーションしています。
  • Request sent。 リクエストが送信されています。
  • ServiceWorker Preparation。 ブラウザが Service Worker を起動しています。
  • Request to ServiceWorker。 リクエストが Service Worker に送信されています。
  • Waiting (TTFB)。 ブラウザがレスポンスの最初のバイトを待機しています。 TTFB は最初のバイトを受け取るまでの時間(Time To First Byte)の略です。 このタイミングには、1 往復のレイテンシとサーバーがレスポンスを準備するのにかかった時間が含まれています。
  • Content Download。 ブラウザがレスポンスを受信しています。
  • Receiving Push。 ブラウザは、HTTP/2 サーバー プッシュを介してこのレスポンスのデータを受信しています。
  • Reading Push。 ブラウザは以前に受信したローカルデータを読み取っています。

開始元と依存関係の表示

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

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

リクエスト表が時系列順に並べられている場合、カーソルを合わせているリクエストの上にある、最初の緑色のリクエストが依存関係の開始元です。 その上に別の緑色のリクエストがある場合、そのリクエストが開始元の開始元です。 さらに上にある場合も同様です。

load イベントの表示

DevTools では、[Nerwork] パネルの複数の場所に DOMContentLoaded および load イベントのタイミングを表示します。 DOMContentLoaded イベントは青色、load イベントは赤色で表示されます。

[Network] パネルの DOMContentLoaded および load イベントの場所。
図 29. [Network] パネルの DOMContentLoaded および load イベントの場所

リクエストの合計数の表示

リクエストの合計数は、[Network] パネルの下部にある [Summary] ペインに示されます。

DevTools が開かれて以来のリクエストの合計数
図 30. DevTools が開かれて以来のリクエストの合計数

合計ダウンロード サイズの表示

リクエストの合計ダウンロード サイズは、[Network] パネルの下部にある [Summary] ペインに示されます。

リクエストの合計ダウンロード サイズ
図 31. リクエストの合計ダウンロード サイズ

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

リクエストが行われたスタック トレースの表示

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

リソースのリクエストが行われたスタック トレース
図 32. リソースのリクエストが行われたスタック トレース

リソースの未圧縮サイズの表示

[Use Large Request Rows] Use Large Request Rows をクリックして、 {:.inline-icon} [Size] 列の下の値を確認します。

未圧縮リソースの例。
図 33. ネットワーク経由で送信された jquery-bundle.js ファイルの圧縮後のサイズは 30.9 KB ですが、未圧縮サイズは 86.3 KB です。

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

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

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

  1. リクエスト表で任意のリクエストを右クリックします。
  2. [Save as HAR with Content] を選択します。 DevTools は、DevTools が開かれて以来発生したすべてのリクエストを HAR ファイルに保存します。 リクエストをフィルタ処理したり、1 つのリクエストだけを保存する方法はありません。

HAR ファイルを取得すると、分析のためにそれを DevTools にインポートし直すことができます。 これには、単にリクエスト表に HAR ファイルをドラッグ アンド ドロップします。 HAR Analyzer も参照してください。

[Save as HAR with Content] の選択。
図 34. [Save as HAR with Content] の選択

1 つ以上のリクエストのクリップボードへのコピー

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

  • Copy Link Address。 リクエストの URL をクリップボードにコピーします。
  • Copy Response。 レスポンス本文をクリップボードにコピーします。
  • Copy as cURL。 リクエストを cURL コマンドとしてコピーします。
  • Copy All as HAR。 すべてのリクエストを一連の cURL コマンドとしてコピーします。
  • Copy All as HAR。 すべてのリクエストを HAR データとしてコピーします。
[Copy Response] の選択。
図 35. [Copy Response] の選択

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

重要なセクションに集中するために、[Network] パネルの UI のセクションを展開するか、折りたたみます。

[Filters] ペインの非表示

デフォルトでは、DevTools には [Filters] ペインが表示されています。 [Filter] Filter をクリックしてそれを非表示にします。{: .devtools-inline }

[Hide Filters] ボタン
図 36. 青い枠で示されている [Hide Filters]

大きいリクエスト行の使用

ネットワーク リクエスト表により広い空間が必要な場合は、大きい行を使用します。 列によっては、大きい行を使用した場合、追加の情報も示されます。 たとえば、[Size] 列の下の値はリクエストの未圧縮サイズです。

[Requests] ペインの大きいリクエスト行の例。
図 37. [Requests] ペインの大きいリクエスト行の例

[Use large request rows] Use large request rows をクリックして、大きい行を使用可能にします。

[Large Request Rows] ボタン
図 38. 青い枠で示されている [Large Request Rows]

Overview ペインの非表示

デフォルトでは、DevTools では Overview ペインが表示されています。 [Hide overview] Hide overview をクリックしてそれを非表示にします。

[Hide Overview] ボタン
図 39. 青い枠で示されている [Hide Overview]

フィードバック

Was this page helpful?