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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

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

ネットワーク アクティビティを検査するでは、[ネットワーク] パネルの最も一般的な機能について説明するチュートリアルをご覧いただけます。

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

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

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

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

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

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

録画に加えて、次の操作を行うことができます。

ネットワーク リクエストを調べる

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

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

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

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

ネットワーク リクエストをフィルタリングして並べ替える

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

[リクエスト] テーブルでリクエストをフィルタする方法はいくつかあります。

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

読み込み動作を変更する

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

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

ネットワーク リクエスト データを保存してエクスポートする

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