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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

概要

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

ネットワーク アクティビティを検査するで、ネットワーク パネルで最もよく使用される機能の一部を説明するガイド付きチュートリアルをご覧ください。

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

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

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

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

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

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

録画以外にも、次のことができます。

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

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

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

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

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

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

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

[リクエスト] テーブルでリクエストをフィルタするには、次の方法があります。

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

読み込み動作を変更する

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

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

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

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