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

Kayce Basques

このチュートリアルでは、ページのネットワーク アクティビティの検査に関連する、DevTools で最もよく使用される機能のいくつかについて説明します。

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

この記事を読み進めるか、または下にあるこのチュートリアルのビデオ版をご覧ください。

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

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

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

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

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

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

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

    デモウェブサイト。

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

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

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

    Devtools のコンソール パネル。

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

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

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

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

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

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

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

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

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

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

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

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

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

  3. デモの [Get Data] ボタンをクリックします。

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

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

詳細情報を表示

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

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

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

低速ネットワーク接続をシミュレートする

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

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

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

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

    [Network] パネルで [3G] を選択する。

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

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

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

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

スクリーンショットは、ページ読み込み時にページがどのように見えるかを示し、各間隔で読み込まれたリソースを示します。

スクリーンショットをキャプチャする手順は次のとおりです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    [ネットワーク] パネルの [レスポンス] タブ。

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

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

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

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

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

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

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

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

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

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

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

    Cache-Control の検索結果。

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

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

  4. [Search] タブと [Headers] タブを閉じます。

    閉じるボタン。

リソースのフィルタ

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

フィルタ ツールバー。

フィルタ ツールバーはデフォルトで有効になっています。入力されていない場合は、次の手順を実行します。

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

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

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

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

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

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

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

  3. タイプ -main.css。DevTools は main.css を除外します。パターンに一致する他のファイルも除外されます。

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

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

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

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

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

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

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

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

    CSS ファイルのみを表示する [Network] パネル。

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

    CSS ファイルと JS ファイルのみを表示した [Network] パネル。

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

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

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

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

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

    [Network] パネルのコマンド メニュー。

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

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

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

  4. タイプ main.css。

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

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

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

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

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

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