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

この記事では、ネットワーク分析や Web ページの ネットワーク アクティビティの検査に使用されるネットワーク ツールのさまざまな機能の概要について説明します。

「ネットワーク アクティビティの検査」も参照してください。これは、ネットワーク ツールの詳細なチュートリアルチュートリアルです。

ネットワーク要求を記録する

既定では、DevTools は、DevTools が開いている限り、 すべてのネットワーク 要求をネットワーク ツールに記録します。

[ネットワーク] パネル

ネットワーク要求の記録を停止する

要求の記録を停止するには:

  1. [ネットワーク] ツールで、[ネットワーク ログの記録を停止する (ネットワーク ログ記録を停止する)] をクリックします。 DevTools が要求を記録しなくなったことを示す灰色に変わります。

  2. ネットワーク ツールがフォーカスされている間、Ctrl + E (Windows、Linux) または Command + E (macOS) を押します。

要求をクリアする

[ネットワーク] ツールの [クリア] (クリア) ボタンをクリックして、[要求] テーブルからすべての要求をクリアします。

[クリア] ボタン

ページ読み込み間で要求を保存する

ページ読み込み中に要求を保存するには、 ネットワーク ツールで [ ログの保持 ] チェック ボックスをオンにします。

[ログの保持] チェック ボックス

DevTools では、 ログの保持を無効にするまで、すべての要求が保存されます。

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

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

スクリーンショットを有効にするには:

  1. DevTools で、 ネットワーク ツールを開きます。

  2. [ネットワーク] ツールの右上にある [ネットワーク設定 (歯車)] アイコンをクリックします。 チェックボックスの行が表示されます。

  3. [ スクリーンショットのキャプチャ ] チェック ボックスをオンにします。

[スクリーンショットのキャプチャ] を有効にする

スクリーンショットをキャプチャするには:

  1. ネットワーク ツールにフォーカスがある場合は、Ctrl キーを押しながら F5 キーを押してページを更新します。 スクリーンショットがキャプチャされ、サムネイルがチェックボックスの行の下に表示されます。

    スクリーンショットは次のように操作できます。

  2. スクリーンショットにカーソルを合わせると、そのスクリーンショットがキャプチャされたポイントが表示されます。 [ 概要 ] グラフ ウィンドウに黄色の垂直線が表示されます。

    スクリーンショットにカーソルを合わせる

  3. スクリーンショットのサムネイルをクリックして、スクリーンショットのキャプチャ後に発生した要求を除外します。

  4. スクリーンショットのサムネイルをダブルクリックして拡大し、スクリーンショットを表示します。

  5. Esc キーを押してスクリーンショット ビューアーを閉じます。

読み込み動作を変更する

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

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

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

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

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

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

  1. [ネットワーク条件] ドロワーを開きます。

  2. [ キャッシュを無効にする ] チェック ボックスをオンまたはオフにします。

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

ブラウザー キャッシュをいつでも手動でクリアするには、[要求] テーブル内の任意の場所を右クリックし、[ ブラウザー キャッシュのクリア] をクリックします。

ブラウザー キャッシュのクリアの選択:

ブラウザー キャッシュのクリアの選択

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

プログレッシブ Web Appsという名前の新しいクラスの Web アプリは、サービス ワーカーの助けを借りてオフラインで機能します。 この種類のアプリをビルドするときに、データ接続のないデバイスをすばやくシミュレートすると便利な場合があります。

オフライン ネットワーク エクスペリエンスをシミュレートするには、[調整なし] ドロップダウン メニュー > [プリセット> オフライン] を選択します

[ オフライン ] ドロップダウン メニュー:

[オフライン] ドロップダウン メニュー

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

[ 調整なし ] ドロップダウン メニューから低速 3G、高速 3G、およびその他の接続速度をエミュレートします。

[調整] ドロップダウン メニュー:

[調整] ドロップダウン メニュー

低速 3G や高速 3G など、さまざまなプリセットから選択できます。 独自のカスタム プリセットを追加するには、[調整] メニューを開き、[ カスタム>追加] を選択します。

DevTools では、 ネットワーク ツールの横に警告アイコンが表示され、調整が有効になっていることを通知します。

ネットワーク アクティビティの検査」「低速なネットワーク接続をシミュレートする」も参照してください。

ネットワーク条件ドロワーからの低速ネットワーク接続をエミュレートする

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

  1. [ネットワーク条件] ドロワーを開きます。

  2. [調整] メニューから接続速度を選択します。

ブラウザー Cookie を手動でクリアする

ブラウザー Cookie をいつでも手動でクリアするには、[要求] テーブル内の任意の場所を右クリックし、[ ブラウザー Cookie のクリア] を選択します。

[ブラウザー Cookie のクリア] を選択する

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

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

  1. [ネットワーク条件] ドロワー ツールを開きます。

  2. [ 自動的に選択 ] チェック ボックスをオフにします。

  3. メニューからユーザー エージェント オプションを選択するか、テキスト ボックスにカスタム ユーザー エージェントを入力します。

ユーザー エージェント クライアント ヒントを設定する

サイトで ユーザー エージェント クライアント ヒントが使用されている場合は、[ ネットワーク条件 ] パネルを使用して、別のユーザー エージェント クライアント ヒントを提供します。

  1. Web ページを右クリックし、[ 検査] を選択します。

  2. [ ネットワーク>ネットワーク条件] を選択します

  3. [ユーザー エージェント] パネルで、[ ブラウザーの既定の使用 ] チェック ボックスをオフにし、[ ユーザー エージェント クライアント ヒント] を選択します。

    ユーザー エージェント クライアント ヒントの設定

  4. 既定値の Custom...をそのまま使用するか、ドロップダウン リストから定義済みのブラウザーとデバイスを選択します。

  5. どちらの場合も、次のように [ユーザー エージェント クライアント ヒント] を設定します。

    • Edge92 などのブランドバージョン。 [ + ブランドの追加] をクリックして、複数のブランドとバージョンのペアを追加します。
    • 92.0.1111.0 などの完全なブラウザー バージョン
    • Windows10.0 などのプラットフォームバージョン
    • x86 などのアーキテクチャ
    • Galaxy Nexus などのデバイス モデル

    注:

    いずれかのユーザー エージェント クライアント ヒントを設定または変更します。 必要な値はありません。

  6. [更新] を選択します。

  7. 変更を確認するには、[ コンソール ] をクリックし、「」と入力します navigator.userAgentData。 必要に応じて結果を展開して、ユーザー エージェント データの変更を表示します。

ユーザー エージェント クライアント のヒントは、 モバイル デバイスのエミュレート (デバイス エミュレーション) で設定することもできます。

フィルター処理要求

要求は、プロパティ、種類、または時間でフィルター処理でき、データ URL を非表示にすることができます。

プロパティで要求をフィルター処理する

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

テキスト ボックスが表示されない場合は、[ フィルター] ウィンドウが非表示になっている可能性があります。 詳細については、「 フィルター ウィンドウを非表示にする」を参照してください。

[ フィルター] テキスト ボックス:

[フィルター] テキスト ボックス

各プロパティをスペースで区切ることで、複数のプロパティを同時に使用できます。 たとえば、 mime-type:image/png larger-than:1K 1 KB を超えるすべての PNG が表示されます。 マルチプロパティ フィルターは、操作と AND 同じです。 OR 操作は現在サポートされていません。

サポートされているプロパティの完全な一覧:

プロパティ 詳細
domain 指定したドメインのリソースのみを表示します。 ワイルドカード文字 (*) を使用して、複数のドメインを含めることができます。 たとえば、 *.com.com終わるすべてのドメイン名のリソースを表示します。 DevTools は、見つかったすべてのドメインをオートコンプリート ドロップダウン メニューに設定します。
has-response-header 指定した HTTP 応答ヘッダーを含むリソースを表示します。 DevTools は、見つかったすべての応答ヘッダーをオートコンプリート ドロップダウン メニューに設定します。
is を使用して is:running リソースを検索 WebSocket します。
larger-than 指定したサイズを超えるリソースをバイト単位で表示します。 の値の設定は、 の 10001kの設定と同じです。
method 指定した HTTP メソッドの種類で取得されたリソースを表示します。 DevTools は、見つかったすべての HTTP メソッドをドロップダウン メニューに設定します。
mime-type 指定した MIME の種類のリソースを表示します。 DevTools は、見つかったすべての MIME の種類をドロップダウン メニューに設定します。
mixed-content すべての混合コンテンツ リソース (mixed-content:all) または現在表示されているリソース (mixed-content:displayed) のみを表示します。
scheme 保護されていない HTTP () または保護された HTTPSscheme:https (scheme:http) 経由で取得されたリソースを表示します。
set-cookie-domain 指定した値と一致する属性をSet-CookieDomain持つヘッダーを持つリソースを表示します。 DevTools は、見つかったすべての Cookie ドメインをオートコンプリートに設定します。
set-cookie-name 指定した値と一致する名前の Set-Cookie ヘッダーを持つリソースを表示します。 DevTools は、見つかったすべての Cookie 名をオートコンプリートに設定します。
set-cookie-value 指定した値と一致する値を Set-Cookie 持つヘッダーを持つリソースを表示します。 DevTools は、見つかったすべての Cookie 値をオートコンプリートに設定します。
status-code 特定の HTTP 状態コードに一致するリソースを表示します。 DevTools は、見つかったすべての状態コードをオートコンプリート ドロップダウン メニューに設定します。

種類で要求をフィルター処理する

要求の種類で要求をフィルター処理するには、[ ネットワーク ] パネルのボタンをクリックします。

  • Xhr
  • Js
  • Css
  • Img
  • Media
  • フォント
  • Doc
  • WS - WebSocket。
  • マニフェスト
  • その他 - ここに記載されていないその他の型。

ボタンが表示されない場合は、[ フィルター] ウィンドウが非表示になっている可能性があります。 「 フィルター ウィンドウを非表示にする」を参照してください。

複数の種類のフィルターを同時に有効にするには、 Ctrl (Windows、Linux) または Command (macOS) を長押しし、フィルターをクリックします。

フィルターを使用して、JS、CSS、およびドキュメント リソースを表示します。

型フィルターを使用して JS、CSS、およびドキュメント リソースを表示する

時間で要求をフィルター処理する

[ 概要 ] ウィンドウで左または右にドラッグして、その期間中にアクティブだった要求のみを表示します。 フィルターは包括的です。 強調表示された時間内にアクティブだった要求が表示されます。

約 300 ミリ秒で非アクティブであった要求をフィルター処理します。

約 300 ミリ秒で非アクティブであった要求を除外する

データ URL を非表示にする

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

要求を非表示にするには、[ データ URL を非表示にする] チェック ボックスをオフにします。

[データ URL を非表示にする] チェック ボックス

要求を並べ替える

既定では、Requests テーブル内の要求は開始時刻で並べ替えられますが、他の条件を使用してテーブルを並べ替えることができます。

列で並べ替える

[要求] 内の任意の列のヘッダーをクリックして、その列で要求を並べ替えます。

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

ウォーターフォールによる要求の並べ替え方法を変更するには:

  • [要求] テーブルのヘッダーを右クリックし、[ ウォーターフォール] にカーソルを合わせて、次のいずれかのオプションを選択します。

    • 開始時刻 - 開始された最初の要求が先頭に配置されます。

    • 応答時間 - ダウンロードを開始した最初の要求が先頭に配置されます。

    • 終了時刻 - 完了した最初の要求が先頭に配置されます。

    • 合計期間 - 接続設定と要求または応答が最短の要求が一番上に配置されます。

    • 待機時間 - 応答を最短で待機した要求が一番上に配置されます。

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

次に、ウォーターフォールを合計期間で並べ替える方法を示します。 各バーの明るい部分は待機に費やされた時間であり、暗い部分はバイトのダウンロードに費やされた時間です。

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

要求を分析する

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

要求のログを表示する

DevTools が開かれている間に行われたすべての要求のログを表示するには、Requests テーブルを使用します。 各項目の詳細を表示するには、要求をクリックまたはポイントします。

Requests テーブル

Requests テーブルには、既定で次の列が表示されます。

  • 名前。 リソースのファイル名、または リソースの識別子。
  • 状態。 HTTP 状態コード。
  • 。 要求されたリソースの MIME の種類。
  • イニシエーター。 次のオブジェクトまたはプロセスが要求を開始できます。
    • パーサー。 HTML パーサー。
    • リダイレクト。 HTTP リダイレクト。
    • スクリプト。 JavaScript 関数。
    • その他。 リンク経由でページに移動したり、アドレス バーに URL を入力したりするなど、他のプロセスやアクションもあります。
  • サイズ。 サーバーによって配信される応答ヘッダーと応答本文の合計サイズ。
  • 時刻。 要求の開始から応答の最後のバイトの受信までの合計期間。
  • ウォーターフォール。 各要求のアクティビティの視覚的な内訳。

列を追加または削除する

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

Requests テーブルへの列の追加

カスタム列の追加

Requests テーブルにカスタム列を追加するには、Requests テーブルのヘッダーを右クリックし、[ 応答ヘッダー>] [ヘッダー列の管理] の順に選択します。 [ ヘッダー列の管理] ポップアップ ウィンドウが開きます。 [ カスタム ヘッダーの追加 ] ボタンをクリックし、カスタム ヘッダー名を入力して、[ 追加] をクリックします。

Requests テーブルへのカスタム列の追加

要求のタイミング関係を表示する

ウォーターフォールを使用して、要求のタイミング 関係を表示します。 ウォーターフォールの既定のorganizationでは、要求の開始時刻が使用されます。 そのため、左側に遠い要求は、右側に遠い要求よりも早く開始されます。

ウォーターフォールを並べ替えるさまざまな方法を確認するには、[ アクティビティフェーズで並べ替え] に移動します。

[ 要求 ] ウィンドウのウォーターフォール列:

[要求] ウィンドウの [ウォーターフォール] 列

応答本文のプレビューを表示する

応答本文のプレビューを表示するには、次の手順を使用します。

  1. [要求] テーブルの [名前 ] 列の下にある要求の URL をクリックします。
  2. [ プレビュー ] タブを選択します。

[プレビュー] タブは、主に画像を表示する場合に便利です。

プレビュー パネル

応答本文を表示する

要求への応答本文を表示するには、次の手順を使用します。

  1. [要求] テーブルの [名前 ] 列の下にある要求の URL をクリックします。
  2. [ 応答 ] タブをクリックします。

応答パネル

HTTP ヘッダーを表示する

要求に関する HTTP ヘッダー データを表示するには、次の手順を使用します。

  1. [要求] テーブルの [名前 ] 列の下にある要求の URL をクリックします。

  2. [ ヘッダー ] タブをクリックします。

[ヘッダー] パネル

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

既定では、[ ヘッダー] パネルにはヘッダー名がアルファベット順に表示されます。 受信した順序で HTTP ヘッダー名を表示するには、次の手順を使用します。

  1. 関心のある要求の [ヘッダー] パネルを開きます。 詳細については、「 HTTP ヘッダーの表示」を参照してください。

  2. [要求ヘッダー] または [応答ヘッダー] セクションの横にある [ソースの表示] をクリックします。

クエリ文字列パラメーターを表示する

URL のクエリ文字列パラメーターを人間が判読できる形式で表示するには、次の手順を使用します。

  1. 関心のある要求の [ヘッダー] パネルを開きます。 詳細については、「 HTTP ヘッダーの表示」を参照してください。

  2. [ クエリ文字列パラメーター] セクションに移動します。

[クエリ文字列パラメーター] セクション

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

要求のクエリ文字列パラメーター ソースを表示するには、次の手順を使用します。

  1. [ クエリ文字列パラメーター] セクションに移動します。 詳細については、「 クエリ文字列パラメーターの表示」を参照してください。

  2. [ソースの表示] を選択します。

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

クエリ文字列パラメーターを人間が判読できる形式で表示し、エンコードを保持するには、次の手順を使用します。

  1. [ クエリ文字列パラメーター] セクションに移動します。 詳細については、「 クエリ文字列パラメーターの表示」を参照してください。

  2. [ エンコードされたビュー URL] をクリックします

Cookie を表示する

要求の HTTP ヘッダーで送信された Cookie を表示するには、次の手順を使用します。

  1. [要求] テーブルの [名前 ] 列の下にある要求の URL をクリックします。
  2. [ Cookie] タブを クリックします。

Cookie パネル

要求のタイミングの内訳を表示する

要求のタイミングの内訳を表示するには、次の手順を使用します。

  1. [要求] テーブルの [名前 ] 列の下にある要求の URL をクリックします。
  2. [ タイミング ] タブをクリックします。

データにすばやくアクセスする方法については、現在の記事の 「タイミングの内訳をプレビューする」を参照してください。

[タイミング] パネルに表示される各フェーズの詳細については、現在の記事の「タイミングの内訳フェーズの説明」を参照してください。

[タイミング] パネル:

[タイミング] パネル

各フェーズの詳細。

ディスプレイへのアクセスの詳細については、「 表示タイミングの内訳」を参照してください。

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

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

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

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

ホバーせずにデータを表示するには、現在のセクションの上部にある「 要求のタイミングの内訳を表示する」を参照してください。

タイミングブレークダウンフェーズの説明

これらの各フェーズは、[ タイミング ] タブに表示される場合があります。

  • キューに入ります。 ブラウザーは、次のいずれかが true の場合に要求をキューに入れます

    • 優先度の高い要求があります。
    • この配信元には既に 6 つの TCP 接続が開いています。これは制限です。 HTTP/1.0 および HTTP/1.1 にのみ適用されます。
    • ブラウザーがディスク キャッシュ内の領域を簡単に割り当て中です。
  • ストールしました。 「キューに入れる」で説明されている理由により、要求がストール する可能性があります。

  • DNS 参照。 ブラウザーが要求の IP アドレスを解決しています。

  • 初期接続。 ブラウザーは、TCP ハンドシェイクや再試行、Secure Socket Layer (SSL) のネゴシエートなど、接続を確立しています。

  • プロキシ ネゴシエーション。 ブラウザーが プロキシ サーバーと要求をネゴシエートしています。

  • 送信された要求。 要求が送信されています。

  • ServiceWorker の準備。 ブラウザーがサービス ワーカーを起動しています。

  • ServiceWorker への要求。 要求がサービス ワーカーに送信されています。

  • 待機中 (TTFB)。 ブラウザーは応答の最初のバイトを待機しています。 TTFB は 、最初のバイトまでの時間を表します。 このタイミングには、待機時間の 1 回のラウンド トリップと、サーバーが応答の準備にかかった時間が含まれます。

  • コンテンツのダウンロード。 ブラウザーが応答を受信しています。

  • プッシュを受信しています。 ブラウザーは、HTTP/2 サーバー プッシュを介してこの応答のデータを受信しています。

  • 読み取りプッシュ。 ブラウザーは、以前に受信したローカル データを読み取ります。

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

要求のイニシエーターと依存関係を表示するには、 Shift キー を押しながら、 Requests テーブル内の要求にカーソルを合わせます。

DevTools の色:

  • イニシエーターは緑色で表示されます。
  • 依存関係は赤で表示されます。

要求のイニシエーターと依存関係の表示:

要求のイニシエーターと依存関係の表示

Requests テーブルが時系列に並べ替えられたときに、行にカーソルを合わせると、その前の行に緑色の要求が表示されます。 緑色の要求は、依存関係のイニシエーターです。 その前の行に別の緑色の要求が表示される場合、その高い要求はイニシエーターのイニシエーターです。 などなど。

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

DevTools では、ネットワーク ツール上の複数の場所に および load イベントのDOMContentLoadedタイミングが表示されます。 イベントは DOMContentLoaded 青で load 、イベントは赤です。

ネットワーク ツール上DOMContentLoadedの イベントと load イベントの場所:

DOMContentLoaded の場所とネットワーク パネル上のイベントの読み込み

要求の合計数を表示する

[ 概要 ] ウィンドウの [ネットワーク ] ツールの下部に、要求の合計数が表示されます。

注意

この番号は、DevTools が開かれた後にログに記録された要求のみを追跡します。 DevTools が開かれる前に他の要求が発生した場合、それらの要求はカウントされません。

DevTools が開かれた後の要求の合計数

DevTools が開かれた後の要求の合計数

合計ダウンロード サイズを表示する

要求の合計ダウンロード サイズは、ネットワーク ツールの下部にある [概要] ウィンドウに一覧表示されます。

注意

この番号は、DevTools が開かれた後にログに記録された要求のみを追跡します。 DevTools が開かれる前に他の要求が発生した場合、前の要求はカウントされません。

要求の合計ダウンロード サイズ:

要求の合計ダウンロード サイズ

ブラウザーが各項目を圧縮解除した後のリソースの大きさを確認するには、「 リソースの非圧縮サイズを表示する」を参照してください。

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

JavaScript ステートメントがリソースを要求した後、 イニシエーター 列にカーソルを合わせて、要求に至るまでのスタック トレースを表示します。

リソース要求に至るまでのスタック トレース:

リソース要求に至るスタック トレース

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

[ 大きな要求行を使用 する] チェック ボックスをオンにし、[ サイズ ] 列の一番下の値を確認します。

非圧縮リソースの例を次に示します。 ネットワーク経由で送信されたファイルの jquery-3.3.1.min.js 圧縮サイズは でした 29.9 KB。一方、非圧縮サイズは でした 84.9 KB

非圧縮リソースの例

要求データをエクスポートする

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

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

  1. [要求] テーブル 要求を右クリックし、[ コンテンツで HAR として保存] を選択します。 DevTools は、DevTools を開いた後に発生したすべての要求を HAR ファイルに保存します。 要求をフィルター処理することも、1 つの要求を保存することもできません。

HAR ファイルを保存したら、分析のために DevTools にインポートし直すことができます。 HAR ファイルを Requests テーブルにドラッグ アンド ドロップします。

[ コンテンツを使用して HAR として保存] を選択します。

[コンテンツで HAR として保存] を選択する

1 つ以上の要求をクリップボードにコピーする

[要求] テーブルの [ 名前 ] 列で、要求を右クリックし、[ コピー] にマウス ポインターを合わせ、次のいずれかのオプションを選択します。

名前 詳細
リンク アドレスのコピー 要求の URL をクリップボードにコピーします。
応答のコピー 応答本文をクリップボードにコピーします。
フェッチとしてコピーする  
cURLとしてコピーする 要求を cURL コマンドとしてコピーします。
すべてをフェッチとしてコピーする  
[すべてコピー] をcURL すべての要求をcURLコマンドのチェーンとしてコピーします。
すべて HAR としてコピーする すべての要求を HAR データとしてコピーします。

[ 応答のコピー] を選択します。

[応答のコピー] を選択する

書式設定された応答 JSON をクリップボードにコピーする

ネットワーク要求を選択し、[ ヘッダー] ウィンドウに移動します。 応答の JSON 値をコピーするには、[ 要求ペイロード] に移動し、JSON 応答コンテンツを右クリックし、[ 値のコピー] を選択します。

[値のコピー] 右クリック コマンド

書式設定された応答 JSON を Microsoft Visual Studio Code に貼り付けます。

書式設定された応答 JSON を使用した Microsoft Visual Studio Code

ネットワーク要求からクリップボードにプロパティ値をコピーする

ネットワーク要求からクリップボードにプロパティ値をコピーするには:

  1. [ヘッダー] ウィンドウを開きます。

  2. 次のいずれかのヘッダー セクションを開きます。

    • 要求ペイロード (JSON)
    • フォーム データ
    • クエリ文字列パラメーター
    • 要求ヘッダー
    • 応答ヘッダー
  3. 値を右クリックし、[値の コピー] を選択します。 これで、値を任意のエディターに貼り付けて確認できるようになりました。

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

ネットワーク ツール UI のセクションを展開または折りたたみ、重要な情報に集中できます。

[フィルター] ウィンドウを非表示にする

既定では、DevTools には [フィルター] ウィンドウが表示されます。 [フィルター] ウィンドウを非表示にするには、[フィルター (フィルター)] を選択します

[フィルターの非表示] ボタン

大きな要求行を使用する

ネットワーク要求テーブルに空白を増やす場合は、大きな行を使用します。 一部の列では、大きな行を使用する場合にもう少し詳しい情報が提供されます。 たとえば、 Size 列の一番下の値は、要求の非圧縮サイズです。

大きな行を有効にするには、[ 大きな要求行を使用 する] チェック ボックスをオンにします。 [要求] ペインの大きな 要求行の 例:

[要求] ウィンドウの大きな要求行の例

[概要] ウィンドウを非表示にする

既定では、DevTools には [概要 ] ウィンドウが表示されます。 [概要] ウィンドウを非表示にするには、[概要の表示] チェック ボックスをオフにします。

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

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 ケイス・バスク (テクニカルライター、Chrome DevTools & Lighthouse)によって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています