[ネットワーク] パネルを使用して、ページの読み込みを分析し、ネットワーク リソースを調べます。
概要
[ネットワーク] パネルでは、次のことができます。
- ネットワーク アクティビティを記録する
- ネットワーク リクエストを検査する
- ネットワーク リクエストのフィルタと並べ替え
- 検索ネットワークのヘッダーとレスポンス
- 読み込み動作を変更する
- ネットワーク リクエストをブロックする
- ネットワーク状態を変更する
prefetch
投機ルールをデバッグする- HTTP レスポンス ヘッダーをオーバーライドする
- 複数の URL のヘッダーをワイルドカード文字でオーバーライドする。
- ネットワーク リクエスト データを保存、エクスポートする
最もよく使用される [ネットワーク] パネル機能を紹介するガイド チュートリアルについては、ネットワーク アクティビティの検査をご覧ください。
[ネットワーク] パネルを開く
[Network] パネルを開くには、DevTools を開いて、上部のアクションバーにある [Network] をクリックします。
または、コマンド メニューから [ネットワーク] パネルを開く手順は次のとおりです。
- DevTools を開きます。
- 次のコマンドを実行して、コマンド メニューを開きます。
- macOS: Command+Shift+P
- Windows、Linux、ChromeOS: Ctrl+Shift+P
- 「
Network
」と入力し、[ネットワーク パネルを表示] を選択して Enter キーを押します。
ネットワーク アクティビティを記録する
DevTools を開くと、DevTools が開いている限り、ネットワーク リクエストが自動的に [Network] パネルに記録されます。
録画に加えて、次のことができます。
- ネットワーク リクエストの記録を停止する。
- [リクエスト] テーブルからすべてのリクエストをクリアします。
- ページ読み込みをまたいでリクエストを保存する。
- オフライン エクスペリエンスをエミュレートする。
- 低速なネットワーク接続をシミュレートする。
ネットワーク リクエストを検査する
すべてのネットワーク リクエストは、パネルの中央にある [Requests] テーブルに記録されます。
デフォルトで表示される列と、追加できる列の詳細については、リクエストのログを表示するをご覧ください。
リクエストの名前をクリックすると、そのリクエストに関する次のような追加情報を含むタブが表示されます。
- ヘッダー: 選択したリソースの HTTP ヘッダー。
- ペイロード: クエリ文字列パラメータとリクエストのフォームデータ。
- プレビュー: HTML の基本的なレンダリング。
- レスポンス: 選択したリソースの HTML ソースコード。
- イニシエータ: リソースがリクエストされた理由。
- タイミング: 選択したリソースのネットワーク アクティビティの内訳。
- Cookie: リクエストとそのレスポンスの Cookie。
ネットワーク リクエストのフィルタと並べ替え
[Network] パネルでは、次の 2 つの方法で [Requests] テーブルのリクエストを並べ替えることができます。
次に、リクエスト テーブルのリクエストをフィルタリングする方法をいくつか示します。
- プロパティでリクエストをフィルタする
- リクエストを種類でフィルタする
- リクエストを時間でフィルタする
- データの URL を非表示にする
- 拡張機能の URL を非表示にする
- ブロックされたレスポンス Cookie が含まれるリクエストのみを表示する
- ブロックされたリクエストのみを表示する
- サードパーティのリクエストのみを表示する
検索ネットワークのヘッダーとレスポンス
特定の文字列または正規表現ですべてのリソースの HTTP ヘッダーとレスポンスを検索する方法については、検索ネットワークのヘッダーとレスポンスをご覧ください。
読み込み動作を変更する
[ネットワーク] パネルで読み込み動作を変更して、ページのユーザー エクスペリエンスをテストします。
[Network] パネルを使用すると、次のことができます。
- ブラウザ キャッシュを無効にして、新規ユーザーをエミュレートする
- ブラウザのキャッシュを手動で削除する
- ブラウザの Cookie を手動で削除する
- オフラインでのエミュレート
- 低速なネットワーク接続をシミュレートする
- HTTP レスポンス ヘッダーをオーバーライドする
- ユーザー エージェントをオーバーライドする
ネットワーク リクエスト データの保存とエクスポート
ネットワーク リクエスト データを保存してエクスポートするには、以下をご覧ください。