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

ネットワーク ツールには、Web ページのネットワーク アクティビティを検査するための次の機能があります。

ネットワーク ツールの詳細なチュートリアルと概要については、「ネットワーク アクティビティの検査」を参照してください。

詳細な内容:

• ネットワーク要求を記録する
  • ネットワーク要求の記録を停止する
  • 要求のクリア
  • ページ読み込み中に要求を保存する
  • ページの読み込み中にスクリーンショットをCapture screenshots (ページの読み込み中にスクリーンショットをキャプチャする)
  • 要求を再送信する
  • 要求をフェッチ呼び出しとして編集して再送信する
• 読み込み動作を変更する
  • ブラウザーのキャッシュを無効にして、初めての訪問者をエミュレートする
    • ネットワーク条件ツールからブラウザー キャッシュを無効にする
  • ブラウザーのキャッシュを手動でクリアする
  • オフラインでエミュレートする
  • 遅いネットワーク接続をエミュレートする
    • カスタム調整プロファイルを作成する
    • WebSocket 接続を調整する
    • ネットワーク条件ツールから低速のネットワーク接続をエミュレートする
  • ブラウザーの Cookie を手動でクリアする
  • HTTP 応答ヘッダーをオーバーライドする
  • ユーザー エージェントをオーバーライドする
• ユーザー エージェント クライアント ヒントを設定する
• 検索要求
• フィルター処理要求
  • プロパティで要求をフィルター処理する
  • 種類で要求をフィルター処理する
  • 時刻で要求をフィルター処理する
  • データ URL を非表示にする
  • 拡張機能の URL を非表示にする
  • 応答 Cookie がブロックされている要求のみを表示する
  • ブロックされた要求のみを表示する
  • サード パーティの要求のみを表示
• 要求の並べ替え
  • 列で並べ替え
  • アクティビティ フェーズで並べ替え
• 要求を分析する
  • 要求のログを表示する
    • 列を追加または削除する
    • 応答ヘッダーのカスタム列を追加する
  • インライン フレームで要求をグループ化する
  • 要求のタイミング関係を表示する
  • WebSocket 接続のメッセージを分析する
  • ストリーム内のイベントを分析する
  • 応答本文のプレビューを表示する
  • 応答本文の表示
  • HTTP ヘッダーを表示する
    • HTTP ヘッダー ソースを表示する
    • 暫定ヘッダーの警告
  • 要求ペイロードの表示 (クエリ文字列パラメーターとフォーム データ)
    • ペイロード ソースの表示
    • URL エンコードされたクエリ文字列パラメーターの表示
  • Cookie を表示する
  • 要求のタイミング ブレークダウンを表示する
    • タイミングの内訳をプレビューする
    • タイミング ブレークダウン フェーズの説明
    • サービス ワーカーの要求ルーティングを分析する
  • イニシエーターと依存関係の表示
  • 画面の読み込みイベント
  • 要求の合計数を表示する
  • 合計ダウンロード サイズを表示する
  • 要求の原因となったスタック トレースを表示する
  • リソースの非圧縮サイズを表示する
• 要求データをエクスポートする
  • すべてのネットワーク要求を HAR ファイルに保存する
  • 分析のために HAR ファイルを DevTools にインポートする
  • ネットワーク要求をクリップボードにコピーする
  • 書式設定された応答 JSON をクリップボードにコピーする
  • ネットワーク要求からクリップボードにプロパティ値をコピーする
• ネットワーク ツールのレイアウトを変更する
  • [フィルター] ウィンドウを非表示にする
  • 大きな要求行を使用する
  • 概要ウィンドウを非表示にする
• 関連項目

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

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

例:

1. 新しいウィンドウまたはタブで、[ ネットワーク アクティビティの検査 ] デモ ページなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   [ ネットワーク ログの記録の停止 ] ボタンは赤色で使用できます。

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

レコーディング要求を停止するには:

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

2. ネットワーク ツールにフォーカスがある状態で、Ctrl+E (Windows、Linux) または Command + E (macOS) を押します。

要求のクリア

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

または、ネットワーク ツールにフォーカスがある間に、Ctrl+L (Windows、Linux、macOS) または Command + K (macOS) を押します。

関連項目:

• TODO アプリ

ページ読み込み中に要求を保存する

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

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

関連項目:

• TODO アプリ

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

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

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

1. 新しいウィンドウまたはタブで TODO アプリなどの Web ページに移動します。

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

   DevTools が開きます。

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

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

5. [Capture screenshots] チェックボックスを選択します。

   

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

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

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

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

   

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

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

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

要求を再送信する

Web ページを再度読み込みせずにネットワーク要求を再送信するには、ネットワーク ツールの [要求] テーブルで [再送信] コマンドを使用します。

Resend コマンドは、次の要求タイプで使用できます。

• XHR
• フェッチ
• JavaScript
• CSS
• image
• メディア
• font
• WebAssembly
• manifest
• テキスト トラック
• ソース マップ

要求を再送信するには:

1. 新しいウィンドウまたはタブで 、ネットワーク ツールのリファレンス デモなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、次の行が表示されます。

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. デモ Web ページで、[ XHR 要求を送信する ] ボタンをクリックします。

   ネットワーク ツールの [要求] テーブルに、data.json行が追加されます。 [ イニシエーター] 列は script.js:20 と表示されます。

6. [ 要求] テーブルで、 data.json 要求を右クリックし、[ 再送信] を選択します。

   または、要求を選択し、 R キーを押します。

   ネットワーク ツールの [要求] テーブルに、2 番目のdata.json行が追加されます。 [ イニシエーター] 列には [その他] が表示されます。

   

イニシエーターの詳細については、次を参照してください。

• イニシエーターと依存関係を以下に表示します。
• [ネットワーク アクティビティの検査] でネットワーク アクティビティをログします。

DevTools は、XHR 要求を XHR として再送信します。 DevTools は、サポートされている他の要求の種類を、送信する前にフェッチ要求に変換します。

デモの [XHR 要求を送信する] ボタンをクリックすると (これにより JavaScript が要求を送信する)、要求の右クリック [コピー] メニューにスタック トレースのコピー メニュー項目が表示されます>コピー。 以下の 「ネットワーク要求をクリップボードにコピーする」を参照してください。

要求をフェッチ呼び出しとして編集して再送信する

再送信する前にネットワーク要求を編集するには、ネットワーク ツールの [要求] テーブルで [編集してフェッチとして再送信] コマンドを使用します。 このコマンドにより、DevTools はコンソール ツールでネットワーク要求をfetch()呼び出しとしてコピーします。そこで、ネットワーク要求を変更して送信できます。

[ フェッチとして編集して再送信 ] コマンドは、次の要求タイプで使用できます。

• XHR
• フェッチ
• JavaScript
• CSS
• image
• メディア
• font
• WebAssembly
• manifest
• テキスト トラック
• ソース マップ
• document
• プリフェッチ
• ping 要求

XHR 要求を XHR として再送信する Resend コマンドとは異なり、[ Edit and resend as fetch] (エディットしてフェッチとして再送信 ) は、XHR およびサポートされているその他すべての要求タイプを fetch() 呼び出しに変換します。

[要求] テーブルのオプションの [実行コンテキスト] 列には、各要求の送信元の実行コンテキストが表示されます。

要求をフェッチ呼び出しとして編集して再送信するには:

1. 新しいウィンドウまたはタブで 、ネットワーク ツールのリファレンス デモなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、次の行が表示されます。

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. デモ Web ページで、[ XHR 要求を送信する ] ボタンをクリックします。

   ネットワーク ツールの [要求] テーブルに、data.json行が追加されます。

6. [ 要求] テーブルで、変更する要求 ( data.json 要求など) を右クリックし、[ 編集してフェッチとして再送信] を選択します。

   コンソール ツールが DevTools の下部にあるドロワーで開きます。

   要求を再現する編集可能な fetch() 呼び出しが コンソール プロンプトに追加されます。 生成されたコードには、元の要求とその実行コンテキストを識別するコメントが含まれます。

   生成されたコードの上のメッセージ (data.jsonへの GET 要求の再送信可能なコピーなど) には、ネットワーク ツールの元の要求へのリンクが含まれています (が表示されます)。

   

   メモ: コンソール プロン プトで保留できる要求は一度に 1 つだけです。 別の要求に対して [編集してフェッチとして再送信 ] を選択した場合、新しい fetch() 呼び出しによって現在の コンソール プロンプトが置き換えられ、警告は表示されません。

7. 生成されたコメントで実行コンテキストを選択するように指示される場合は、コンソール ツールバーの [JavaScript コンテキスト] ドロップダウン リストを使用して、ネットワーク要求をフェッチ呼び出しとして再送信する実行コンテキスト (top など) を選択します。

8. 生成された fetch() 呼び出しの URL、メソッド、ヘッダー、または本文を変更します。

   fetch() 呼び出しで設定できない一部の要求ヘッダーは、情報コメントとして保持されます。

9. Enter キーを押して、変更した要求を送信します。

新しい要求が 、ネットワーク ツールの [要求 ] テーブルに表示されます。 [ 名前 ] 列のターミナル アイコンは、要求が コンソールから発信されたことを示します。

読み込み動作を変更する

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

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

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

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

ネットワーク ツールから、DevTools の下部にあるクイック ビュー パネルにあるネットワーク条件ツールを開き、そこからブラウザー キャッシュを無効にできます。

1. ネットワーク ツールで、[その他のネットワーク条件] ) ボタンをクリックします。 ネットワーク条件ツールが DevTools の下部にあるクイック ビュー パネルで開きます。

2. ネットワーク条件ツールで、[キャッシュを無効にする] チェック ボックスをオンにします。

   

関連項目:

• ネットワーク条件ツール

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

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

関連項目:

• TODO アプリ

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

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

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

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

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

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

次のようなさまざまなプリセットから選択できます。

• 高速 4G
• 低速 4G
• 3G
• Offline

独自のカスタム プリセットを追加するには、[調整] メニューをクリックし、[カスタム>追加] を選択します。

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

関連項目:

• [ネットワーク アクティビティの検査] で低速なネットワーク接続をシミュレートします。
• TODO アプリ

カスタム調整プロファイルを作成する

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

カスタム調整プロファイルを作成するには:

1. 新しいウィンドウまたはタブで、[ ネットワーク アクティビティの検査 ] デモ ページなどの Web ページに移動します。

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

   DevTools が開きます。

3. ネットワーク ツールを選択します。

4. [ 調整] メニューの [カスタム] セクションで、[ 追加] を選択します。

   または、DevTools>設定>調整のカスタマイズと制御を選択します。

   DevTools 設定 ページが開き、[ 調整] ページが選択されます。

5. [ ネットワーク調整プロファイル ] セクションで、[ プロファイルの追加 ] ボタンをクリックします。

   値の例を以下に示します。次のセクションで使用します。

6. [ プロファイル名 ] テキスト ボックスに「 10kbps」と入力します。

7. [ ダウンロード] テキスト ボックスに「 10 (10 kbit/sの場合)」と入力します。

8. [ Upload ] テキスト ボックスに「 10 (10 kbit/sの場合)」と入力します。

9. [ 待機時間 ] テキスト ボックスに「 10 (10 ミリ秒)」と入力します。

10. [パケット損失] テキスト ボックスに「1」(1%) の場合) と入力します。

11. [ Packet Queue Length ] テキスト ボックスに「 10」と入力します。

12. [ Packet Reordering ] チェックボックスを選択します。

    

13. [追加] ボタンをクリックします。

    カスタム調整プロファイルが表示されます。

    

14. [ 設定 ] ウィンドウで、[ 閉じる ] (X) ボタンをクリックします。

15. ネットワーク ツールを選択します。

16. [ 調整] ドロップダウン メニューの [カスタム] セクションで、 10kbps などのカスタム調整プロファイルを選択します。

    

    [ネットワーク] タブに警告 () アイコンが表示され、調整が有効になっていることが通知されます。

関連項目:

• [調整] でカスタム ネットワーク調整プロファイルを設定します。

WebSocket 接続を調整する

HTTP 要求に加えて、DevTools は WebSocket 接続を調整できます。 前のセクションで作成した低速カスタム調整プロファイルを使用して、Web ページでの WebSocket 接続の調整の影響を示します。

WebSocket 調整を監視するには:

1. 前のセクション「 カスタム調整プロファイルの作成」の手順を実行します。

2. 新しいウィンドウまたはタブで、 オンライン WebSocket テスターなどの WebSocket を使用しているページに移動します。

3. ページで、WebSocket 接続を確立します。

   オンライン WebSocket テスターの Web ページを使用する場合は、[接続] ボタンをクリックします。

   API トークンを取得するための PieSocket アカウントを作成しない場合は、Web ページに "接続が確立されました - {"error":"不明な API キー"}" と表示されます。

   API トークンを取得するために PieSocket アカウントを作成すると、Web ページには単に「接続確立」と表示されます。

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

   DevTools が開きます。

5. DevTools のネットワーク ツールの [調整] ドロップダウン メニューで、[カスタム>10kbps] を選択します。

   このオプションは、前のセクション「 カスタム調整プロファイルの作成」で作成されました。

6. オンライン WebSocket テスター Web ページのメッセージ テキスト ボックスで、調整なしの DevTools を削除し、調整付きの DevTools を入力します。

7. オンライン WebSocket テスターの Web ページで、[送信] ボタンをクリックします。

   オンライン WebSocket テスター Web ページ内のコンソールには、調整付きの DevTools が表示されます。

8. ネットワーク ツールの上部にある [ソケット フィルター] ボタン (以下を参照) を選択します。

9. 表内で、接続名 ( channel_123?api_key=...) などをクリックします。

   タブが表示されます。

10. [ メッセージ] タブ (以下を参照) を選択します。

    クライアントとサーバー間で送信された WebSocket メッセージが表示されます。

    [ 時刻 ] 列には、メッセージが送受信された時刻が表示されます。 これらの時間値は、調整されたネットワーク接続を反映しています。

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

ネットワーク ツールから、DevTools の下部にあるクイック ビュー パネルでネットワーク条件ツールを開き、そこからネットワーク接続を調整できます。

1. ネットワーク ツールで、[その他のネットワーク条件) ボタンをクリックします。 ネットワーク条件ツールが DevTools の下部にあるクイック ビュー パネルで開きます。

2. ネットワーク 条件 ツールの [ ネットワーク調整 ] メニューで、接続速度を選択します。

関連項目:

• ネットワーク条件ツール

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

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

HTTP 応答ヘッダーをオーバーライドする

関連項目:

• ローカル コピーで Web ページ リソースを上書きする ([上書き] タブ)
• でファイルと HTTP 応答ヘッダーをオーバーライドするWeb コンテンツと HTTP 応答ヘッダーをローカルでオーバーライドします。

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

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

1. ネットワーク ツールで、[その他のネットワーク条件] ネットワーク条件ツールが DevTools の下部にあるクイック ビュー パネルで開きます。

2. ネットワーク条件ツールで、[ブラウザーの既定を使用する] チェック ボックスをオフにします。 その他のコントロールが使用可能になります。

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

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

サイトでユーザー エージェント クライアント ヒントが使用されていて、それらをテストする場合は、 ネットワーク条件 ツールまたはモバイル デバイスのエミュレート (デバイス エミュレーション) で設定できます。

ネットワーク条件ツールでユーザー エージェント クライアント ヒントを設定するには:

1. ネットワーク ツールで、[その他のネットワーク条件] をクリックします。 ネットワーク条件ツールが DevTools の下部にあるクイック ビュー パネルで開きます。

2. [ユーザー エージェント] セクションで、[ブラウザーの既定の使用] チェック ボックスをオフにし、[ユーザー エージェント クライアント ヒント] を展開します。

   

3. [ ユーザー エージェント ] ドロップダウン リストで、定義済みのブラウザーとデバイスを選択します。 または、既定値の [カスタム...] をそのまま使用し、[ カスタム ユーザー エージェントの入力 ] テキスト ボックスに情報を入力します。

4. 選択肢 (事前定義またはカスタム) のいずれかについて、次のようにユーザー エージェント クライアント ヒントを指定します。

   • Edge や 92 などのブランドとバージョン。 複数のブランド/バージョンのペアを追加するには、[ + ブランドの追加] をクリックします。
   • 92.0.1111.0 などの完全なブラウザー バージョン。
   • Windows や 10.0 などのプラットフォームとバージョン。
   • アーキテクチャ (x86など)。
   • Galaxy Nexus などのデバイス モデル。

   任意のユーザー エージェント クライアント ヒントを設定または変更できます。必須値はありません。

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

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

関連項目:

• Web サイトから Microsoft Edge を検出する際のユーザー エージェント クライアントのヒント。

検索要求

要求ヘッダー、ペイロード、応答を検索するには:

1. ネットワーク ツールで、[検索] ) ボタンをクリックします。 または、Ctrl+F (Windows、Linux) または Command + F (macOS) を押します。

   ネットワーク ツールの左側に [検索] タブが開きます。

2. [ 検索 ] テキスト ボックスにクエリ文字列を入力し、 Enter キーを押します。

   必要に応じて、[ 大文字と小文字を区別 する] ボタンをクリックします。 必要に応じて、[ 正規表現] ボタンをクリックして正規表現を有効にします。

3. 検索結果のいずれかをクリックします。 ネットワーク ツールは、一致した要求を黄色で強調表示します。 また、 ネットワーク ツールでは [ヘッダー ] タブまたは [応答 ] タブが開き、一致した文字列 (存在する場合) が強調表示されます。

検索結果を更新するには、[検索] タブで、[更新] ) ボタンをクリックします。

検索結果をクリアするには、[ 検索 ] タブで、[ 検索のクリア ] ) ボタンをクリックします。

DevTools で検索するすべての方法の詳細については、「検索ツールを使用してページのソース ファイルを検索する」を参照してください

フィルター処理要求

プロパティ、タイプ、または時刻で要求をフィルター処理したり、データ URL を非表示にしたりできます。 [ その他のフィルター ] ドロップダウン リストには、次のオプションと状態チェックマークが含まれています。

• データ URL を非表示にする
• 拡張機能の URL を非表示にする
• ブロックされた応答 Cookie
• ブロックされた要求
• サード パーティの要求

ドロップダウン リストの左側には、ドロップダウン リスト内で選択されているフィルターの数を示す番号があります。

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

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

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

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

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

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

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

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

要求の種類で要求をフィルター処理するには、ネットワーク ツールのボタンをクリックします。すべて、フェッチ/XHR、ドキュメント、CSS、JS、フォント、Img、メディア、マニフェスト、WS (WebSocket)、Wasm (WebAssembly)、その他 (ここに記載されていないその他の種類)。

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

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

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

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

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

データ URL を非表示にする

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

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

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

作成したコードに焦点を当てるために、Microsoft Edge にインストールした拡張機能によって送信された無関係な要求を除外できます。 拡張機能要求には、 chrome-extension:// で始まる URL があります。

拡張機能の要求を非表示にするには、[ フィルター ] アクション バーで、[ その他のフィルター ] ドロップダウン メニューを選択し、[ 拡張機能 URL を非表示にする] を選択して、横にチェックマークが表示されるようにします。

下部のステータス バーには、合計のうち表示されている要求の数が表示されます ( たとえば、5 / 10 要求など)。

応答 Cookie がブロックされている要求のみを表示する

応答 Cookie が何らかの理由でブロックされた要求を除くすべてをフィルター処理して除外するには、[ フィルター ] アクション バーで、[ その他のフィルター ] ドロップダウン リストを選択し、[ ブロックされた応答 Cookie] を選択して、横にチェックマークが表示されるようにします。

次に、応答 Cookie がブロックされた理由を確認するには、要求 ( [名前] の下) を選択し、その [Cookie] タブ (右側) を開いてから、情報 () アイコンにカーソルを合わせます。

例:

1. Microsoft Edge で、[設定など]>新しい InPrivate ウィンドウを選択します。

2. アドレス バーに「 Microsoft.com」と入力します。

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

   DevTools が開きます。

4. ネットワーク ツールを選択します。

5. [ すべての フィルター] ボタンが選択されていることを確認します。

6. Web ページを更新します。

   多数のメッセージが ネットワーク ツールに一覧表示されます。

7. [ フィルター] アクション バーで、[ その他のフィルター ] ドロップダウン リストを選択し、[ ブロックされた応答 Cookie] を選択します。

   メニューの [ ブロックされた応答 Cookie] の横にチェックマークが表示されます。

8. ドロップダウン リストの外側をクリックして閉じます。

   応答 Cookie がブロックされている要求が表示されます ( id?d_visid_ver=... など)。

9. id?d_visid_ver=... などの要求を選択します。

   サイド バーが開き、タブが表示されます。

10. [ Cookie] タブを選択します。

11. 情報 () アイコンの上にマウス ポインターを移動します。

    ヒントには、たとえば "ユーザー設定により、Set-Cookie ヘッダーを介して Cookie を設定しようとするこの試行はブロックされました" と表示されます。

    

    下部のステータス バーには、合計のうち表示されている要求の数が表示されます。

さらに、 ネットワーク ツールでは、Edge フラグまたは構成が理由で Cookie がブロックされている要求の横に警告アイコン () が表示されます。 アイコンにカーソルを合わせるとヒントにヒントが表示されます。アイコンをクリックして [ 問題 ] ツールに移動して詳細を確認してください。

ブロックされた要求のみを表示する

ブロックされた要求を除くすべてをフィルター処理するには、[フィルター] アクション バーで [その他のフィルター]>[ブロックされた要求] を選択し、チェックマークが表示されるようにします。 これをテストするには、DevTools の下部にあるクイック ビュー パネルでネットワーク要求ブロック ツールを使用できます。ネットワーク アクティビティの検査で要求をブロックする を参照してください。

例:

1. 新しいウィンドウまたはタブで、[ ネットワーク アクティビティの検査 ] デモ ページなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   [ 要求] テーブルには、 .html、 .css、 .png、および .js ファイルが一覧表示されます。

5. [ その他のフィルター] ドロップダウン リスト ([ 要求のみ表示/非表示要求] のヒント付き) で、[ ブロックされた要求] を選択します。

   ドロップダウン リストの [ ブロックされた要求] の横にチェックマークが表示されます。

6. ドロップダウン リストの外側をクリックして閉じます。

   DevTools が要求をブロックしていないため、 要求 テーブルは空であり、要求はブロックされた要求のみを表示するようにフィルター処理されるようになりました。

7. Esc キーを 1 回か 2 回押すと、クイック ビュー パネルが DevTools の下部に表示されます。

8. クイック ビュー ツールバーで、[その他のツール] ) ボタンをクリックし、[ネットワーク要求のブロック] を選択します。

   ネットワーク要求ブロック ツールがクイック ビュー パネルで開きます。

9. ネットワーク要求ブロック ツールで、[ネットワーク要求ブロック パターンの追加] () ボタンをクリックします。

10. [一致する要求をブロックするテキスト パターン] テキスト ボックスに「*.png」と入力し、[追加] ボタンをクリックします。

    *.png がチェック マーク付きで表示されます。

    ネットワーク ツールでは、まだアクティブにブロックされている要求がないため、要求テーブルは空のままです。

11. Web ページを更新します。

    

    • デモ Web ページでは、見出しの横に Edge ロゴの代わりに、壊れた画像アイコンと画像の代替テキスト (Microsoft Edge DevTools ロゴ) が表示されます。

    • ネットワーク ツールの [要求] テーブルには、.pngファイルのみが一覧表示されます。 [ 要求] テーブルでは、ブロックされた要求が赤色のテキストで強調表示されます。

    • ネットワーク ツールでは、下部のステータス バーに、合計のうち表示されている要求の数が表示されます (たとえば、2 / 5 要求など)。

サード パーティの要求のみを表示

ページの配信元と異なる配信元を持つ要求を除くすべてをフィルター処理するには、[フィルター] アクション バーで [その他のフィルター]>サード パーティ要求] を選択し、チェックマークが表示されるようにします。 [ ネットワーク アクティビティの検査 ] デモ ページで試します。

下部のステータス バーには、合計のうち表示されている要求の数が表示されます。

要求の並べ替え

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

列で並べ替え

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

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

[ ウォーターフォール ] 列は既定ではオフになっています。 [ウォーターフォール] 列を有効にするには、要求テーブルのヘッダーを右クリックし、サブメニューのないウォーターフォール メニュー項目を選択します。

[ウォーターフォール] 列が要求を並べ替える方法を変更するには:

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

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

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

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

  • 合計時間 - 接続設定と要求または応答が最も短い要求が最上部に配置されます。

  • 遅延 - 応答を最も短く待機した要求が一番上に配置されます。

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

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

要求を分析する

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

要求のログを表示する

[ 要求] テーブルを使用して、DevTools が開かれている間に行われたすべての要求のログを表示します。 各項目に関する詳細情報を表示するには、 クリックするか、要求にマウス ポインターを移動します。

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

• 名前。 リソースのファイル名、またはリソースの識別子。
• 状態。 HTTP 状態コード。
• タイプ。 要求されたリソースの MIME タイプ。
• イニシエーター。 次のオブジェクトまたはプロセスが要求を開始できます。
  • パーサー。 HTML パーサー。
  • リダイレクト。 HTTP リダイレクト。
  • スクリプト。 JavaScript 関数。
  • その他。 その他の処理や操作 (リンクを介したページへの移動やアドレス バーへの URL の入力など)。
• サイズ。 サーバーによって配信される、応答ヘッダーと応答本文の合計サイズ。
• 時刻。 要求の開始から応答の最後のバイトの受信までの合計時間。
• フルフィルメント者 要求が HTTP キャッシュによって実行されたか、アプリのサービス ワーカーによって実行されたか。

[ ウォーターフォール ] 列は既定ではオフになっています。 [ウォーターフォール] 列をオンにするには、要求テーブル ヘッダーを右クリックし、サブメニューのないプレーンなウォーターフォール メニュー項目を選択します。

列を追加または削除する

[ 要求 ] テーブルのヘッダーを右クリックし、列名を選択して非表示または表示します。 現在表示されている列の横にはチェックマークが付いています。

応答ヘッダーのカスタム列を追加する

[ 要求 ] テーブルにカスタム列を追加するには:

1. [要求] テーブルのヘッダーを右クリックし、[応答ヘッダー]>[ヘッダー列の管理] を選択します。

   [ ヘッダー列の管理 ] ポップアップ ウィンドウが開きます。

2. [ カスタム ヘッダーの追加 ] ボタンをクリックし、カスタム ヘッダー名を入力して、[ 追加] をクリックします。

   

インライン フレームで要求をグループ化する

ページ上のインライン フレームが多数の要求を開始する場合、インライン フレームをグループ化することで、要求ログをよりわかりやすくすることができます。

要求を iframe でグループ化するには:

1. 新しいウィンドウまたはタブで 、ネットワーク ツールのリファレンス デモなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、次の行が表示されます。

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. デモ Web ページで、[ iframe の読み込み ] ボタンをクリックします。

   [ 要求 ] テーブルに多数の行が追加されます。

   

6. ネットワーク ツールで、[ネットワーク設定] ) ボタンをクリックし、[フレームでグループ化] チェック ボックスをオンにします。

   [ 要求 ] テーブルに、展開可能なフレーム名が表示されます。

7. [ 要求] テーブルで、フレーム上のエキスパンダー三角形をクリックします。

   インライン フレームによって開始された要求が表示されます。

   

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

[要求] ウィンドウの [ウォーターフォール] 列を使用して、要求のタイミング関係を表示します。 [ウォーターフォール] 列の既定の organization では、要求の開始時刻が使用されます。 そのため、右はじょうにある要求よりも先に開始された要求があります。

[ ウォーターフォール ] 列は既定ではオフになっています。 [ウォーターフォール] 列をオンにするには、要求テーブル ヘッダーを右クリックし、サブメニューのないプレーンなウォーターフォール メニュー項目を選択します。

ウォーターフォールを並べ替えるさまざまな方法については、上記の 「アクティビティ フェーズで並べ替え」を参照してください。

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

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

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

1. オンライン Websocket テスターなどの Web ページに移動します。

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

   DevTools が開きます。

3. ネットワーク ツールを選択します。

   [ すべての フィルター] ボタンは既定で選択されています。 [ネットワーク] パネルは空で、メッセージは表示されません。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、多数の要求が一覧表示されます。

5. ネットワーク ツールの上部にある [ソケット フィルター] ボタンを選択すると、ヒントが表示されます。 WebSocket |Web トランスポート |DirectSocket.

   フィルター処理された要求のリストが空です。

6. オンライン Websocket テスターの Web ページで、[ 接続 ] ボタンをクリックします。

   アカウントと API トークンを設定していない場合は、ページが表示されます。

   • 接続の確立
   • {"error":"Unknown API key"} 三角形が下を指しています。サーバーからブラウザに送信されます。

   ネットワーク ツールの [メッセージ] タブに、要求が表示されます。

   • channel_123?api_key=...

7. 要求の一覧で、 channel_123?api_key=... などの WebSocket 接続を選択します。

   サイド バーが開き、タブが表示されます。

8. [ メッセージ] タブを選択します。

   API トークンに登録していない場合は、[ メッセージ] タブにメッセージが表示されます。

   • {"error":"不明な API キー"} に赤い下向き矢印が表示されています。サーバーからブラウザに送信されます。

9. オンライン Websocket テスター Web ページのテキスト ボックスで、 Hello PieSocket! を Hello world! に変更し、[ 送信] ボタンをクリックします。

   Web ページで、コンソールには「 Hello world! 」というメッセージが表示されます。三角形は上向きです。ブラウザーからサーバーに送信されます。

   ネットワーク ツールの [メッセージ] タブで、テーブルには最新の 100 件のメッセージが表示されます。この場合、次のメッセージが追加されます。

   • Hello world! 緑色の上向き矢印付き。ブラウザーからサーバーに送信されました:

注: 赤色の下向き矢印メッセージ (サーバーからエコーされる) と緑色の上向き矢印メッセージを取得するには、次の操作を行う必要があります。

1. PieSocket サイトでアカウントを作成します。 これにより、API トークンが作成されます。

2. PieSocket サイトにクラスターを作成します。

3. PieSocket ダッシュボード ページで、[オンライン テスト] ボタンをクリックします。

   [オンライン WebSocket テスター] ページが開き、クエリ パラメーターが表示されます。

4. [ 接続 ] ボタンをクリックします。

[要求] テーブルを更新するには、[名前] ウィンドウで、WebSocket 接続の名前をもう一度クリックします。

[ 要求] テーブルには、次の 3 つの列があります。

• データ。 メッセージ ペイロード。 メッセージがプレーン テキストの場合は、ここに表示されます。 バイナリ オペコードの場合、この列にはオペコードの名前とコードが表示されます。 次のオペコードがサポートされています。

  • 継続フレーム
  • バイナリ フレーム
  • 接続のフレームを閉じる
  • Ping フレーム
  • ポンフレーム

• 長さ。 メッセージ ペイロードの長さ (バイト単位)。

• 時刻。 メッセージが送受信された時刻。

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

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

1. 新しいウィンドウまたはタブでネットワーク ツールのリファレンス デモなどのイベントをストリーミングする Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、次の行が表示されます。

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js

5. デモ Web ページで、[Stream サーバーから送信されたイベント] ボタンをクリックします。

   [ 要求] テーブルに、 sse (サーバー送信イベント) 行が追加されます。

6. sse (サーバー送信イベント) 要求を選択します。

   サイド バーが開き、[ EventStream] タブが表示されます。

7. [ EventStream] タブを選択します。

   

   新しい "こんにちは" メッセージが 1 秒に 1 回受信され、表示されます。

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

キャプチャされたイベントのリストをクリアするには、[ クリア ] () ボタンをクリックします。

関連項目:

• フェッチ API の使用
• サーバーから送信されたイベント - EventSource API。
• XMLHttpRequest - XHR。

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

HTTP 応答本文の内容をプレビューするには:

1. ネットワーク ツールで、 [要求] テーブルの [名前] 列で、要求の名前をクリックします。

2. サイドバーの [ プレビュー] タブを選択します。

   

[ プレビュー] タブは、主に画像を表示するのに役立ちます。

応答本文の表示

要求への応答本文を表示するには:

1. [ 要求] テーブルの [ 名前 ] 列で、要求の名前をクリックします。

2. サイドバーで、[ 応答] タブを選択します。

   

HTTP ヘッダーを表示する

要求に関する HTTP ヘッダー データを表示するには:

1. [ 要求] テーブルで、要求の名前をクリックします。

2. サイドバーで、[ ヘッダー ] タブを選択し、さまざまなセクションまで下にスクロールします。

   • 全般
   • 初期のヒント ヘッダー (オプション)
   • 応答ヘッダー
   • 要求ヘッダー

   

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

既定では、[ ヘッダー] タブにはヘッダー名がアルファベット順に表示されます。 HTTP ヘッダー名を受信順に表示するには、次の手順を実行します。

1. 新しいウィンドウまたはタブで、 -ms-high-contrast を削除し、Microsoft Edge で標準ベースの強制色を受け入れるなど、XHR を使用する Web ページに移動します。

2. バナー プロンプトが表示された場合は、Cookie を受け入れます。

   一般データ保護規則 (GDPR) が施行されている地域では、このサイトには Cookie バナーが表示され、バナーで Cookie を受け入れない限り、 collect 要求 (下記) は送信されません。

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

   DevTools が開きます。

4. ネットワーク ツールを選択します。

5. Web ページを更新します。

   [ 要求] テーブルには、多数の要求が一覧表示されます。

6. 上部の赤い [ネットワーク ログの記録の停止 ] ) ボタンをクリックします。

7. [ 要求] テーブルで、[ 名前 ] 列をクリックして要求をアルファベット順に並べ替え、[ コレクト要求 ] を選択します。

   サイド バーが開き、タブが表示されます。

8. [ ヘッダー] タブを選択します。

   

9. [応答ヘッダー] または [要求ヘッダー] セクションの横にある [未加工] チェック ボックスをオンにします。

関連項目:

• 上記の HTTP ヘッダーを表示します。

暫定ヘッダーの警告

[ ヘッダー] タブに、 警告メッセージ「暫定のヘッダーが表示される 」が表示されることがあります。次の理由が考えられます。

• 要求はネットワーク経由で送信されず、元の要求ヘッダーを格納しないローカル キャッシュから提供されました。
• 無効なネットワーク リソースです。
• セキュリティ上の理由のため。

要求がネットワーク経由で送信されたのではなく、元の要求ヘッダーを格納しないローカル キャッシュから提供されたとします。 この場合、ネットワーク ツールの上部にある [キャッシュを無効にする] チェック ボックスをオンにすると、完全な要求ヘッダーを表示できます。 例:

1. [ ネットワーク アクティビティの検査(Inspect Network Activity)] デモ ページに移動します。

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

   DevTools が開きます。

3. ネットワーク ツールを選択します。

4. Web ページを更新します。

5. getstarted.js ネットワーク要求を選択します。

   [ 要求ヘッダー ] セクションには、次のメッセージが表示されます: 暫定ヘッダーが表示されています。キャッシュを無効にして、完全なヘッダーを表示します。

   

6. ネットワーク ツールの上部にある [キャッシュを無効にする] チェック ボックスをオンにします。

7. Web ページを更新します。

8. getstarted.js ネットワーク要求を選択します。

   [ 要求ヘッダー ] セクションには、メッセージが表示されなくなりました。完全な要求ヘッダーが表示されます。

関連項目:

• 上記のようにブラウザー キャッシュを無効にして、初めての訪問者をエミュレートします。

要求ペイロードの表示 (クエリ文字列パラメーターとフォーム データ)

HTTP 要求のペイロード (クエリ文字列パラメーターとフォーム データ) を表示するには、次のように [ 要求] テーブルから要求を選択し、サイドバーの [ ペイロード ] タブを選択します。

1. 新しいウィンドウまたはタブで 、ネットワーク ツールのリファレンス デモなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   ネットワーク ツールの [要求] テーブルには、次の行が表示されます。

   • devtools-network-reference/ (index.html)
   • style.css
   • script.js
   • favicon.png

5. デモ Web ページで、[ フォーム データの送信 ] ボタンをクリックします。

   ネットワーク ツールの [要求] テーブルに、行が追加されます:

   • form-data-endpoint?hasfile=true

6. 行 form-data-endpoint?hasfile=trueを選択します。

   サイド バーが開き、[ ペイロード ] タブが表示されます。

7. [ ペイロード ] タブを選択します。

   クエリ 文字列パラメーター セクションとフォーム データ セクションを含む要求のペイロードが表示されます。

DevTools の [コンソール ] タブにエラーが表示されます:

• POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

デモ サーバーに form-data-endpoint POST ハンドラーがないため、コンソールにこの無害な Method Not Allowed エラーが表示されます。 github.io ホスティングではアプリケーション サーバーは実行されず、静的ファイルのみが実行されるため、このエラーは想定されています。

ペイロード ソースの表示

既定では、 ネットワーク ツールはペイロードを人間が判読できる形式で表示します。

代わりに、クエリ文字列パラメーターまたはフォーム データのソースを表示するには、次の手順を実行します。

1. 上記の前のセクションの手順を実行します。

   [ ペイロード ] タブの [クエリ文字列パラメーター ] セクションには、ペイロードが人間が判読できる形式で表示されます ( hasfile)。 [ フォーム データ] セクションには、 username、 timestamp、および fileのペイロードが人間が判読できる形式で表示されます。

   

2. [ クエリ文字列パラメーター ] セクションの見出しの横にある [ ソースの表示 ] ボタンをクリックします。

3. [ フォーム データ] セクション見出しの横にある [ ソースの表示 ] ボタンをクリックします。

   ペイロードのソース情報が表示されます。

   

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

クエリ文字列パラメーターを人間が判読できる形式で表示するが、エンコードは保持されるには、次の操作を行います。

1. 新しいウィンドウまたはタブで、 ネットワーク ツールのリファレンス Demo などのクエリ文字列パラメーターを使用する Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   [ 要求] テーブルには、 .html、 .css、 .js、および .png ファイルが一覧表示されます。

5. デモ Web ページで、[ エンコードされたクエリ パラメーターの送信] ボタンをクリックします。

   [ 要求] テーブルに行が追加されます。

   encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

6. encoded-query-params-endpoint行を選択します。

   サイド バーが開き、タブが表示されます。

7. サイドバーで、[ ペイロード ] タブを選択します。

   [ クエリ文字列パラメーター ] セクションには、次のようにデコードされた URL が表示されます。 https://contoso.com/àéèôçл:

   

8. [ クエリ文字列パラメーター ] セクションで、[ URL でエンコードされた表示 ] ボタンをクリックします。

   URL がエンコードされた文字 (%3A や %2F など) で表示されるようになり、ボタンのラベルが [デコードされたものを表示] に変わります。

   

9. [ デコードの表示] ボタンをクリックします。

   URL が再びデコードされた文字で https://contoso.com/àéèôçл のように表示され、ボタン ラベルが [URL エンコードの表示] に変わります。

Cookie を表示する

要求の HTTP ヘッダーで送信された Cookie を表示するには:

1. [ 要求] テーブルで、要求の名前をクリックします。

2. サイドバーで、[ Cookie] タブを選択します。

   

各列の詳細については、「Cookie の表示、編集、削除」のフィールドを参照してください。

Cookie を変更するには、「 Cookie の表示、編集、および削除」を参照してください。

要求のタイミング ブレークダウンを表示する

要求のタイミング ブレークダウンを表示するには:

1. [要求] テーブルで、要求の名前をクリックします。

2. サイドバーの [タイミング] タブを選択します。

   

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

[ タイミング] パネルに表示される可能性がある各フェーズの詳細については、以下の「 タイミングの内訳フェーズの説明」を参照してください。

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

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

[ ウォーターフォール ] 列は既定ではオフになっています。 [ウォーターフォール] 列をオンにするには、要求テーブル ヘッダーを右クリックし、サブメニューのないプレーンなウォーターフォール メニュー項目を選択します。

ポインターを動かさずにデータを表示するには、上記の 「要求のタイミング ブレークダウンを表示する」を参照してください。

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

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

• キューイング。 次のいずれかに該当する場合、ブラウザーは要求をキューに入れます

  • より優先度の高い要求があります。
  • この配信元では既に 6 つの TCP 接続が開かれており、これが上限です。 HTTP/1.0 および HTTP/1.1 にのみ適用されます。
  • ブラウザーが一時的にディスク キャッシュの領域を割り当てています。

• ストールしています。 キュー処理で説明されている理由何らかの理由で要求がストールしている可能性があります。

• 起動。 要求がサービス ワーカーによって処理される場合、 起動 はサービス ワーカーが起動するまでにかかった時間です。

• respondWith と. 要求がサービス ワーカーによって処理される場合、 respondWith はサービス ワーカーが fetchEvent.respondWith() コールバックを実行するのにかかった時間です。

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

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

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

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

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

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

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

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

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

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

サービス ワーカーの要求ルーティングを分析する

要求ルーティングを視覚化するために、タイムラインにはサービス ワーカー Startup イベントと respondWith フェッチ イベントが表示されます。 サービス ワーカーを経由して渡されたネットワーク要求をデバッグして視覚化できます。

サービス ワーカー要求のタイミング ブレークダウンを表示するには:

1. 新しいウィンドウまたはタブで、 pwamp デモ ページなどのサービス ワーカーを使用しているページに移動します。

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

   DevTools が開きます。

3. ネットワーク ツールを選択します。

4. ページを再読み込みします。

5. 要求の一覧で、サービス ワーカー ファイルを経由したネットワーク要求を選択します。 たとえば、[ about.css] を選択します。

   サイド バーが表示されます。

6. サイドバーの [タイミング ] タブをクリックします。

   

   [ サービス ワーカー ] セクションには、 Startup フェーズと respondWith フェーズに関するタイミング情報が表示されます。

7. [ respondWith ] セクションの展開機能の矢印をクリックします。

   

8. respondWith セクション内で、元の要求の展開矢印をクリックします。

   

9. [応答を受信しました] で、展開の矢印をクリックします。

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

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

• ホバーされた要求を開始した要求は緑色で表示されます。
• ホバーされた要求の依存関係は赤で表示されます。

[ 要求] テーブルが時系列順に並べられている場合、行にカーソルを置くと、その前の行に緑色の要求が表示されます。 緑の要求は、依存関係のイニシエーターです。 その前の行に別の緑色の要求が表示されている場合は、その上位の要求がイニシエーターのイニシエーターです。 等々。

画面の読み込みイベント

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

• 縦線が表示された 概要 ウィンドウ。

• 垂直線を含む [要求] テーブルの [ウォーターフォール ] 列。 [ ウォーターフォール ] 列は既定ではオフになっています。 [ウォーターフォール] 列をオンにするには、要求テーブル ヘッダーを右クリックし、サブメニューのないプレーンなウォーターフォール メニュー項目を選択します。

• [ 概要 ] ウィンドウの、タイミング ラベルを含む ネットワーク ツールの 下部。

DOMContentLoaded イベントは青で、load イベントは赤で表示されます。

要求の合計数を表示する

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

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

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

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

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

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

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

JavaScript ステートメントがリソースを要求した後、[ イニシエーター ] 列にマウス ポインターを置くと、要求に至るまでのスタック トレースが表示されます。

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

リソースの転送済みサイズと非圧縮サイズの両方を同時に表示するには:

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

2. [大きなリクエスト行] チェック ボックスをオンにします。

3. [要求] テーブルの [サイズ ] 列を確認します。 一番上の値は転送されたサイズ、一番下の値はブラウザーが解凍した後のリソースのサイズです。

   

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

フィルターが適用された要求のリストは、次に説明するいくつかの方法でエクスポートまたはコピーできます。

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

HAR (HTTP アーカイブ) は、キャプチャされたデータをエクスポートするためにいくつかの HTTP セッション ツールで使用されるファイル形式です。 形式は、特定のフィールド セットを持つ JSON オブジェクトです。 HAR アナライザーを参照してください。

機密情報が偶発的に漏洩する可能性を減らすために、既定では、 Cookie、 Set-Cookie、 Authorization ヘッダーなどの機密情報を除外する HAR 形式で "校正された" ネットワーク ログをエクスポートできます。 必要に応じて、機密データ を含む ログをエクスポートすることもできます。

機密データを使用せずにすべてのネットワーク要求を HAR ファイルに保存するには:

1. 新しいウィンドウまたはタブで、[ ネットワーク アクティビティの検査 ] デモ ページなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

5. [ 要求] テーブル内の要求を右クリックし、[ HAR としてコピー>すべてコピー (サニタイズ済み)] を選択します。

   

   または、ネットワーク ツールの上部にあるアクション バーで、[HAR のエクスポート (校正済み) ボタンをクリックします。

DevTools は、DevTools を開いてから発生したすべての要求を HAR ファイルに保存します。

要求をフィルター処理したり、1 つの要求を保存したりすることはできません。

機密データを含め、すべてのネットワーク要求を HAR ファイルに保存するには、次の手順を実行します。

1. DevTools で、[ カスタマイズ] を選択し、DevTools>Settings を制御します。

   [ 設定>基本設定 ] ページが開きます。

2. [ ネットワーク ] セクションまで下にスクロールします。

3. [ 機密データを使用して HAR を生成できるようにする] チェック ボックスをオンにします。

4. [ 閉じる ] ) ボタンをクリックします。

5. ネットワーク ツールで、[要求] テーブル内の要求を右クリックし、[HAR としてコピー>すべてコピー (機密データを含む)] を選択します。

   または、上部のアクション バーで、[ HAR のエクスポート (校正済みまたは機密データを含む)] () ボタンをクリックし、[ HAR のエクスポート (機密データを含む)] を選択します。

   

分析のために HAR ファイルを DevTools にインポートする

HAR ファイルを用意したら、 HAR Analyzer を使用して分析のために DevTools にインポートし直すことができます。

分析のために HAR ファイルを DevTools にインポートするには:

• ネットワーク ツールの上部にあるアクション バーで、[HAR ファイルのインポート] ) ボタンをクリックします。

• または、HAR ファイルを [ 要求 ] テーブルにドラッグします。

ネットワーク ツールは、HAR ファイルからインポートされた要求のイニシエーターを読み取り、表示します。 イニシエーターについては、上記の 「要求のログを表示する」を参照してください。

ネットワーク要求をクリップボードにコピーする

[要求] テーブルの [名前] 列で、要求を右クリックし、[コピー] をポイントして、次のいずれかのオプションを選択します。

1 つの要求、その応答、またはスタック トレースをコピーするには:

すべての要求をコピーするには:

フィルター処理された一連の要求をコピーするには、ネットワーク ログにフィルターを適用し、要求を右クリックして、次を選択します。

関連項目:

• フィルター要求、上記のように要求をフィルタリングします。

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

JSON 応答の書式設定された JSON データをコピーするには:

1. [ 要求] テーブルで、JSON 応答につながった要求の名前をクリックします。

2. サイドバーで、[ プレビュー] タブを選択します。

3. 書式設定された JSON 応答プレビューの最初の行を右クリックし、[ 値のコピー] を選択します。

   

   これで、任意のエディターに値を貼り付けることができます。

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

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

1. [要求] テーブルで、要求の名前をクリックします。

2. サイドバーで、[ ペイロード ] タブを選択します。

3. 次のセクションのいずれかを展開します。

   • 要求ペイロード (JSON)
   • フォーム データ
   • クエリ文字列パラメーター
   • 要求ヘッダー
   • 応答ヘッダー

4. 値を右クリックし、[ 値のコピー] を選択します。 これで、任意のエディターに値を貼り付けることができます。

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

ネットワーク ツール UI のセクションを展開または折りたたんで、重要な情報に焦点を当てることができます。

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

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

大きな要求行を使用する

ネットワーク要求テーブルにより多くの空白が必要な場合は、大きな要求行を使用します。 一部の列では、大きな行を使用する場合にもう少し多くの情報も提供されます。次に例を示します。

• [ サイズ] 列の下の値は、要求の圧縮されていないサイズです。

• [ 優先度] 列 (既定では表示されません) には、初期 (下部の値) と最終的な (上部の値) のフェッチ優先度の両方が表示されます。

大きな行を有効にするには:

1. 新しいウィンドウまたはタブで、[ ネットワーク アクティビティの検査 ] デモ ページなどの Web ページに移動します。

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

   DevTools が開きます。

3. DevTools で、 ネットワーク ツールを選択します。

4. Web ページを更新します。

   要求は小さい行に表示されます。

5. ネットワーク ツールで、[ネットワーク設定] ) ボタンをクリックし、[大きな要求行] チェック ボックスをオンにします。

   要求が大きな行に表示されます。

   

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

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

関連項目

• ネットワーク アクティビティの検査 - ネットワーク ツールの 詳細なチュートリアルと概要。

デモ Web ページ:

• ネットワーク アクティビティの検査
• ネットワーク ツール リファレンス デモ
• TODO アプリ

この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。