ネットワーク アクティビティを検査する

Kayce Basques

これは、ページのネットワーク アクティビティの検査に関連する、最もよく使用される DevTools 機能のハンズオン チュートリアルです。

機能を確認するには、ネットワーク リファレンスをご覧ください。

以下を読み進めるか、このチュートリアルの動画版をご覧ください。

ネットワーク パネルを使用する場合

通常、リソースが想定どおりにダウンロードまたはアップロードされていることを確認する必要がある場合は、[ネットワーク] パネルを使用します。[ネットワーク] パネルの一般的なユースケースは次のとおりです。

  • リソースが実際にアップロードまたはダウンロードされていることを確認する。
  • 個々のリソースのプロパティ（HTTP ヘッダー、コンテンツ、サイズなど）を検査する。

ページの読み込みパフォーマンスを改善する方法をお探しの場合は、[ネットワーク] パネルから始めないでください。ネットワーク アクティビティに関連しない負荷パフォーマンスの問題は数多くあります。ページの改善方法に関する具体的な提案が表示されるため、まず Lighthouse パネルから確認します。ウェブサイトの速度を最適化するをご覧ください。

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

このチュートリアルを最大限に活用するには、デモを開いて、デモページで機能を試してみてください。

  1. スタートガイドのデモを開きます。

    デモウェブサイト。

    デモを別のウィンドウに移動することをおすすめします。

    デモを 1 つのウィンドウで開き、このチュートリアルを別のウィンドウで開きます。

  2. Ctrl+Shift+J キーまたは Command+Option+J キー（Mac）を押して、デベロッパー ツールを開きます。[コンソール] パネルが開きます。

    Devtools のコンソール パネル。

    DevTools をウィンドウの下部に固定することもできます。

    DevTools がウィンドウの下部に固定されている。

  3. [Network] タブをクリックします。[ネットワーク] パネルが開きます。

    ウィンドウの下部にドッキングされた Devtools ネットワーク パネル。

現在、[ネットワーク] パネルは空です。これは、DevTools がネットワーク アクティビティを記録するのは、DevTools が開いている間のみであり、DevTools を開いてからネットワーク アクティビティが発生していないためです。

ネットワーク アクティビティをログに記録

ページによって発生するネットワーク アクティビティを表示するには:

  1. ページを再読み込みします。[ネットワーク] パネルでは、すべてのネットワーク アクティビティが [ネットワーク ログ] に記録されます。

    5 件のリクエストを含むネットワーク ログ。

    [ネットワーク ログ] の各行はリソースを表します。デフォルトでは、リソースは時系列で表示されます。通常、最上位のリソースはメインの HTML ドキュメントです。一番下のリソースは、最後にリクエストされたものです。

    各列はリソースに関する情報を表します。デフォルトの列は次のとおりです。

    • ステータス: HTTP レスポンス コード。
    • Type: リソースのタイプ。
    • Initiator: リソースがリクエストされた原因。[Initiator] 列のリンクをクリックすると、リクエストの原因となったソースコードが表示されます。
    • サイズ: ネットワーク経由で転送されたリソースの量。
    • 時間: リクエストに要した時間。

  2. DevTools を開いている限り、ネットワーク アクティビティが [ネットワーク ログ] に記録されます。これを示すために、まず [ネットワーク ログ] の下部で最後のアクティビティを確認します。

  3. デモの [データを取得] ボタンをクリックします。

  4. ネットワーク ログの下部をもう一度確認します。getstarted.json という新しいリソースがあります。[データを取得] ボタンをクリックすると、このファイルがページからリクエストされました。

    ネットワーク ログに新しいリソースが追加されます。

詳細情報を表示

ネットワーク ログの列は構成可能です。使用していない列は非表示にできます。デフォルトで非表示になっている列も多く、有用な列もあります。

  1. [ネットワーク ログ] テーブルのヘッダーを右クリックし、[ドメイン] を選択します。各リソースのドメインが表示されます。

    ドメイン列を有効にする。

ネットワーク接続の速度を遅くする

サイトの作成に使用するパソコンのネットワーク接続は、ユーザーのモバイル デバイスのネットワーク接続よりも高速である可能性があります。ページをスロットリングすると、モバイル デバイスでのページの読み込み時間の詳細を確認できます。

  1. [スロットリング] プルダウンをクリックします。デフォルトでは [スロットリングなし] に設定されています。

    ネットワーク パネルのスロットリング プルダウン。

  2. [3G] を選択します。

    [ネットワーク] パネルで 3G を選択する。

  3. [再読み込み] を長押しして、[キャッシュの消去とハード再読み込み] を選択します。

    キャッシュの消去とハード再読み込み。

    通常、ブラウザは再訪問時にキャッシュから一部のファイルを提供するため、ページの読み込みが高速化されます。[キャッシュの消去とハード再読み込み] では、ブラウザがすべてのリソースに対してネットワークにアクセスするように強制します。これは、初めて訪問したユーザーがページの読み込みをどのように体験しているかを確認する場合に役立ちます。

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

スクリーンショットは、読み込み中のページの様子をさまざまなタイミングでキャプチャし、各間隔で読み込まれたリソースを報告します。

スクリーンショットを撮影する手順は次のとおりです。

  1. [ネットワーク設定] をクリックします。

  2. [スクリーンショット] チェックボックスをオンにします。

  3. [キャッシュの消去とハード再読み込み] ワークフローを使用して、ページを再読み込みします。方法を確認するには、低速接続をシミュレートするをご覧ください。[スクリーンショット] タブには、読み込みプロセスのさまざまな時点でのページの様子がサムネイルで表示されます。

    [ネットワーク] パネルのページ読み込みのスクリーンショット。

  4. 最初のサムネイルをクリックします。DevTools には、その時点で発生していたネットワーク アクティビティが表示されます。

    最初のスクリーンショット中に発生したネットワーク アクティビティ。

  5. [スクリーンショット] チェックボックスを切り替えて、[スクリーンショット] タブを閉じます。

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

リソースの詳細を検査する

リソースをクリックすると、その詳細が表示されます。今すぐ試す:

  1. getstarted.html をクリックします。[ヘッダー] タブが表示されます。このタブを使用して HTTP ヘッダーを検査します。

    [ネットワーク] パネルの [ヘッダー] タブ。

  2. [プレビュー] タブをクリックすると、基本的な HTML レンダリングが表示されます。

    [ネットワーク] パネルの [プレビュー] タブ。

    このタブは、API が HTML でエラーコードを返す場合や、HTML ソースコードよりもレンダリングされた HTML の方が読みやすい場合、または画像を検査する場合に役立ちます。

  3. [レスポンス] タブをクリックして、HTML ソースコードを表示します。

    [Network] パネルの [Response] タブ。

  4. [イニシエータ] タブをクリックして、リクエスト イニシエータ チェーンをマッピングするツリーを表示します。

    [ネットワーク] パネルの [Initiator] タブ。

  5. [タイミング] タブをクリックして、このリソースのネットワーク アクティビティの内訳を表示します。

    ネットワーク パネルの [タイミング] タブ。

  6. [閉じる] をクリックして、[ネットワーク ログ] をもう一度表示します。

    詳細タブの閉じるボタン。

すべてのリソースの HTTP ヘッダーとレスポンスで特定の文字列または正規表現を検索する必要がある場合は、[検索] タブを使用します。

たとえば、リソースで適切なキャッシュ ポリシーが使用されているかどうかを確認するとします。

  1. [検索] アイコンをクリックします。[ネットワーク ログ] の左側に [検索] タブが開きます。

    ネットワーク ログの左側にある [検索] タブ。

  2. 「Cache-Control」と入力して Enter キーを押します。[検索] タブには、リソースのヘッダーまたはコンテンツで検出された Cache-Control のすべてのインスタンスが一覧表示されます。

    Cache-Control の検索結果。

  3. 結果をクリックして表示します。クエリがヘッダーで見つかった場合は、[ヘッダー] タブが開きます。コンテンツ内でクエリが見つかった場合は、[レスポンス] タブが開きます。

    [ヘッダー] タブでハイライト表示された検索結果。

  4. [検索] タブと [ヘッダー] タブを閉じます。

    閉じるボタン。

リソースのフィルタ

DevTools には、現在のタスクに関連しないリソースを除外するための多数のワークフローが用意されています。

フィルタ ツールバー。

フィルタ ツールバーはデフォルトで有効になっています。確認済みではない場合は:

  1. [フィルタ] をクリックして表示します。

文字列、正規表現、プロパティでフィルタする

[フィルタ] 入力ボックスでは、さまざまな種類のフィルタリングがサポートされています。

  1. [フィルタ] 入力ボックスに「png」と入力します。テキスト png を含むファイルのみが表示されます。この場合、フィルタに一致するファイルは PNG 画像のみです。

    文字列フィルタリングの結果がネットワーク ログに記録されます。

  2. タイプ /.*\.[cj]s+$/。DevTools では、ファイル名が j または c で終わらず、その後に s 文字が 1 つ以上続くリソースが除外されます。

    正規表現フィルタの結果がネットワーク ログに表示されます。

  3. タイプ -main.css。DevTools は main.css を除外します。他のファイルがパターンと一致した場合も、除外されます。

    ネットワーク ログにマイナスのフィルタリング結果が記録されます。

  4. [フィルタ] テキスト ボックスに「domain:raw.githubusercontent.com」と入力します。DevTools では、このドメインと一致しない URL を持つリソースが除外されます。

    プロパティのフィルタリングの結果がネットワーク ログに記録されます。

    フィルタ可能なプロパティの一覧については、プロパティでリクエストをフィルタするをご覧ください。

  5. [フィルタ] 入力ボックスのテキストをすべて削除します。

リソースタイプでフィルタする

スタイルシートなど、特定の種類のファイルに焦点を当てるには:

  1. [CSS] をクリックします。他のファイル形式はすべて除外されます。

    CSS ファイルのみを表示するネットワーク パネル。

  2. スクリプトも表示するには、Ctrl キーまたは Command キー（Mac）を押しながら [JS] をクリックします。

    CSS ファイルと JS ファイルのみを表示するネットワーク パネル。

  3. [すべて] をクリックしてフィルタを削除し、すべてのリソースを再び表示します。

他のフィルタリング ワークフローについては、リクエストをフィルタするをご覧ください。

リクエストをブロックする

一部のリソースが利用できない場合、ページの外観と動作はどのようになりますか？完全に機能しなくなったのですか？それとも、まだある程度機能しますか？リクエストをブロックして、次のことを確認します。

  1. Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押してコマンド メニューを開きます。

    ネットワーク パネルのコマンド メニュー。

  2. block と入力し、[Show Request Blocking] を選択して Enter キーを押します。

    [リクエストのブロックを表示] オプション。

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

  4. タイプ main.css。

    ネットワーク パネルで main.css をブロックする

  5. [追加] をクリックします。

  6. ページを再読み込みします。予想どおり、メインのスタイルシートがブロックされているため、ページのスタイルが少し乱れています。ネットワーク ログの main.css 行をメモします。赤色のテキストは、リソースがブロックされていることを意味します。

    main.css がブロックされました。

  7. [リクエストのブロックを有効にする] チェックボックスをオフにします。

ネットワーク アクティビティの検証に関連するその他の DevTools 機能については、ネットワーク リファレンスをご覧ください。