ネットワーク パネル: ネットワークの負荷とリソースを分析する

Dale St. Marthe
Dale St. Marthe
LinkedIn

[ネットワーク] パネルを使用して、ページの読み込みを分析し、ネットワーク リソースを調べます。

概要

[ネットワーク] パネルでは、次のことができます。

最もよく使用される [ネットワーク] パネル機能を紹介するガイド チュートリアルについては、ネットワーク アクティビティの検査をご覧ください。

[ネットワーク] パネルを開く

[Network] パネルを開くには、DevTools を開いて、上部のアクションバーにある [Network] をクリックします。

または、コマンド メニューから [ネットワーク] パネルを開く手順は次のとおりです。

  1. DevTools を開きます。
  2. 次のコマンドを実行して、コマンド メニューを開きます。
  3. macOS: Command+Shift+P
  4. Windows、Linux、ChromeOS: Ctrl+Shift+P コマンド メニュー
  5. 「Network」と入力し、[ネットワーク パネルを表示] を選択して Enter キーを押します。

ネットワーク アクティビティを記録する

DevTools を開くと、DevTools が開いている限り、ネットワーク リクエストが自動的に [Network] パネルに記録されます。

録画に加えて、次のことができます。

ネットワーク リクエストを検査する

すべてのネットワーク リクエストは、パネルの中央にある [Requests] テーブルに記録されます。

デフォルトで表示される列と、追加できる列の詳細については、リクエストのログを表示するをご覧ください。

リクエストの名前をクリックすると、そのリクエストに関する次のような追加情報を含むタブが表示されます。

  • ヘッダー: 選択したリソースの HTTP ヘッダー。
  • ペイロード: クエリ文字列パラメータとリクエストのフォームデータ。
  • プレビュー: HTML の基本的なレンダリング。
  • レスポンス: 選択したリソースの HTML ソースコード。
  • イニシエータ: リソースがリクエストされた理由。
  • タイミング: 選択したリソースのネットワーク アクティビティの内訳。
  • Cookie: リクエストとそのレスポンスの Cookie。

ネットワーク リクエストのフィルタと並べ替え

[Network] パネルでは、次の 2 つの方法で [Requests] テーブルのリクエストを並べ替えることができます。

次に、リクエスト テーブルのリクエストをフィルタリングする方法をいくつか示します。

特定の文字列または正規表現ですべてのリソースの HTTP ヘッダーとレスポンスを検索する方法については、検索ネットワークのヘッダーとレスポンスをご覧ください。

読み込み動作を変更する

[ネットワーク] パネルで読み込み動作を変更して、ページのユーザー エクスペリエンスをテストします。

[Network] パネルを使用すると、次のことができます。

ネットワーク リクエスト データの保存とエクスポート

ネットワーク リクエスト データを保存してエクスポートするには、以下をご覧ください。