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

Kayce Basques 氏
Kayce Basques

これは、ページのネットワーク アクティビティの検査に関連する DevTools のよく使用される機能の一部を紹介する実践的なチュートリアルです。

機能を参照したい場合は、ネットワーク リファレンスをご覧ください。

このチュートリアルの続きを読むか、動画をご覧ください。

[Network] パネルを使用する場合

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

  • リソースが実際にアップロードまたはダウンロード中であることを確認する。
  • HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを調べる。

ページ読み込みのパフォーマンスを向上させる方法を探している場合は、[ネットワーク] パネルから開始しないでください。読み込みパフォーマンスの問題には、ネットワーク アクティビティとは関係のないさまざまな種類があります。まずは Lighthouse パネルから、ページの改善方法に関するターゲットを絞った提案を行います。ウェブサイトの速度を最適化するをご覧ください。

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

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

  1. デモの開始方法を開きます。

    デモ

    図 1. デモ

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

    1 つのウィンドウでデモを、このチュートリアルを別のウィンドウで表示

    図 2. 1 つのウィンドウでデモを、このチュートリアルを別のウィンドウで表示

  2. Ctrl+Shift+J キーまたは Command+Option+J キー(Mac)を押して、DevTools を開きます。[Console] パネルが開きます。

    コンソール

    図 3. コンソール

    DevTools をウィンドウの下部に固定することをおすすめします。

    ウィンドウの下部に固定された DevTools

    図 4. ウィンドウの下部に固定された DevTools

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

    ウィンドウの下部に固定された DevTools

    図 5. ウィンドウの下部に固定された DevTools

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

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

ページで発生したネットワーク アクティビティを表示するには:

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

    ネットワーク ログ

    図 6. ネットワーク ログ

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

    各列はリソースに関する情報を表します。図 6 にデフォルトの列を示します。

    • ステータス:HTTP レスポンス コード
    • type:リソースタイプ。
    • イニシエータ。リソースがリクエストされる原因。[Initiator] 列のリンクをクリックすると、リクエストの原因となったソースコードが表示されます。
    • Time。リクエストに要した時間。
    • ウォーターフォール。リクエストのさまざまなステージの図。ウォーターフォールにカーソルを合わせると、内訳が表示されます。

  2. DevTools を開いている限り、ネットワーク アクティビティはネットワーク ログに記録されます。これを確認するため、まずネットワーク ログの一番下を確認し、前回のアクティビティを心に留めておきます。

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

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

    ネットワーク ログの新しいリソース

    図 7. ネットワーク ログの新しいリソース

詳細情報を表示

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

  1. [Network Log] テーブルのヘッダーを右クリックして、[Domain] を選択します。各リソースのドメインが表示されます。

    [ドメイン] 列を有効にする

    図 8. [ドメイン] 列を有効にする

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

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

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

    スロットリングの有効化

    図 9. スロットリングの有効化

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

    [低速 3G] を選択します

    図 10. [低速 3G] を選択します

  3. [再読み込み] 再読み込み を長押しして、[Empty Cache And Hard Reboot] を選択します。

    空のキャッシュとハードリロード

    図 11. 空のキャッシュとハードリロード

    アクセスが頻繁に発生する場合、ブラウザは通常、一部のファイルをキャッシュから提供します。これにより、ページの読み込みが高速化されます。[Empty Cache And Hard 再読み込み] を選択すると、ブラウザはすべてのリソースに対して強制的にネットワークに接続されます。これは、初めて訪問者がページをどのように読み込んだかを確認する際に役立ちます。

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

スクリーンショットを使用すると、読み込み中のページの読み込み時間の推移を確認できます。

  1. [Capture Screenshots] スクリーンショットをキャプチャする をクリックします。
  2. 空のキャッシュとハードリロードのワークフローを使用して、ページを再度再読み込みします。その方法については、低速接続をシミュレートするをご覧ください。[Screenshots] ペインには、読み込みプロセス中のさまざまなポイントでページがどのように表示されるかを示すサムネイルが表示されます。

    ページ読み込みのスクリーンショット

    図 12. ページ読み込みのスクリーンショット

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

    最初のスクリーンショットで発生していたネットワーク アクティビティ

    図 13. 最初のスクリーンショットで発生していたネットワーク アクティビティ

  4. [Capture Screenshots] スクリーンショットをキャプチャする をもう一度クリックして、[スクリーンショット] ペインを閉じます。

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

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

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

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

    [Headers] タブ

    図 14. [Headers] タブ

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

    [プレビュー] タブ

    図 15. [プレビュー] タブ

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

  3. [Response] タブをクリックします。HTML ソースコードが表示されます。

    [回答] タブ

    図 16. [回答] タブ

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

    [タイミング] タブ

    図 17. [タイミング] タブ

  5. 閉じるアイコン 閉じる をクリックして、ネットワーク ログを再度表示します。

    閉じるボタン

    図 18. 閉じるボタン

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

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

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

    検索ペイン

    図 19. 検索ペイン

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

    Cache-Control の検索結果

    図 20. 「Cache-Control」の検索結果

  3. 結果をクリックすると、その内容が表示されます。ヘッダーでクエリが見つかった場合は、[Headers] タブが開きます。コンテンツでクエリが検出された場合は、[レスポンス] タブが開きます。

    [Headers] タブでハイライト表示された検索結果

    図 21. [Headers] タブでハイライト表示された検索結果

  4. 検索ペインと [タイミング] タブを閉じます。

    閉じるボタン

    図 22. 閉じるボタン

リソースのフィルタ

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

フィルタ ツールバー

図 23. フィルタ ツールバー

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

  1. フィルタ アイコン フィルタ をクリックして表示します。

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

[フィルタ] テキスト ボックスでは、さまざまな種類のフィルタリングを使用できます。

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

    文字列フィルタ

    図 24. 文字列フィルタ

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

    正規表現フィルタ

    図 25. 正規表現フィルタ

  3. タイプ -main.css。DevTools によって main.css が除外されます。他のファイルがパターンに一致する場合、そのファイルもフィルタで除外されます。

    ネガティブ フィルタ

    図 26. ネガティブ フィルタ

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

    プロパティ フィルタ

    図 27. プロパティ フィルタ

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

  5. 任意のテキストの [フィルタ] テキスト ボックスをクリアします。

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

スタイルシートなど、特定のタイプのファイルに絞り込む方法は次のとおりです。

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

    CSS ファイルのみを表示しています

    図 28. CSS ファイルのみを表示しています

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

    CSS ファイルと JS ファイルのみを表示しています

    図 29. CSS ファイルと JS ファイルのみを表示しています

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

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

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

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

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

    コマンド メニュー

    図 30. コマンド メニュー

  2. block」と入力して [リクエスト ブロックを表示] を選択し、Enter キーを押します。

    リクエストのブロックを表示

    図 31. リクエストのブロックを表示

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

  4. タイプ main.css

    main.css のブロック

    図 32. main.css をブロックしています

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

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

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

    図 33. main.css をブロックしました

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

次のステップ

これでチュートリアルは終了です。[Dispense Award] をクリックして、賞品を受け取ります。

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