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

Kayce Basques

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

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

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

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

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

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

ページ読み込みのパフォーマンスを向上させる方法を探している場合は、[Network] パネルから始める必要はありません。 読み込みパフォーマンスの問題には、ネットワーク アクティビティとは関係のないものが数多くあります。Lighthouse パネルを使用すると、ページの改善方法に関する的確な提案を受けることができます。詳しくは、ウェブサイトの速度を最適化するをご覧ください。

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

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

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

   

   図 1. デモ

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

   

   図 2. デモとこのチュートリアルを別のウィンドウに表示

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

   

   図 3. コンソール

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

   

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

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

   

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

この時点では、[ネットワーク] パネルには何も表示されません。これは、DevTools が開いている間のネットワーク アクティビティのみを記録し、DevTools を開いてからネットワーク アクティビティが発生しないためです。

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

ページによって引き起こされたネットワーク アクティビティを表示するには:

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

   

   図 6. ネットワーク ログ

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

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

   • ステータス:HTTP レスポンス コード
   • type:リソースタイプ。
   • イニシエータ。リソースがリクエストされた原因。[イニシエータ] 列のリンクをクリックすると、リクエストを発生させたソースコードが表示されます。
   • Time。リクエストにかかった時間。
   • ウォーターフォール。リクエストのさまざまなステージを図示したもの。ウォーターフォールにカーソルを合わせると 詳細が表示されます
   注: ネットワーク ログの上にあるグラフは「概要」と呼ばれます。このチュートリアルでは使用しないため、必要に応じて非表示にできます。[概要] ペインを非表示にするをご覧ください。

2. DevTools を開いていれば、ネットワーク アクティビティがネットワーク ログに記録されます。これを実証するには、まずネットワーク ログの下部を確認し、最後のアクティビティを心に留めます。

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

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

   

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

詳細情報を表示

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

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

   

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

ヒント: [Name] 列のセルにカーソルを合わせると、リソースの完全な URL が表示されます。

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

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

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

   

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

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

   

   図 10. [Slow 3G] の選択

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

   

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

   再度アクセスすると、通常、ブラウザは一部のファイルをキャッシュから配信するため、ページの読み込み速度が向上します。空のキャッシュとハードリロードは、ブラウザを強制的にネットワークに接続してすべてのリソースを取得します。これは、初めてアクセスしたユーザーがページをどのように読み込んだかを確認する場合に役立ちます。

   注: [Empty Cache And Hard Reboot] ワークフローは、DevTools が開いている場合にのみ使用できます。

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

スクリーンショットでは、ページ読み込み中の経時的な変化を確認できます。

1. [Capture Screenshots] をクリックします。

2. [Empty Cache And Hard 再読み込み] ワークフローを使用してページを再度再読み込みします。方法については、低速の接続をシミュレートするをご覧ください。[Screenshots] ペインには、読み込み処理中にページがさまざまなポイントでどのように表示されるかを示すサムネイルが表示されます。

   

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

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

   

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

4. もう一度 [Capture Screenshots] をクリックして、[Screenshots] ペインを閉じます。

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

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

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

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

   

   図 14. [Headers] タブ

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

   

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

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

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

   

   図 16. [Response] タブ

   ヒント: ファイルが圧縮されている場合、[Response] タブの下部にある [Format] ボタンをクリックすると、読みやすくなるようにファイルの内容が再フォーマットされます。

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

   

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

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

   

   図 18. [閉じる] ボタン

検索ネットワークのヘッダーとレスポンス

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

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

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

   

   図 19. 検索ペイン

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

   

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

3. 結果をクリックすると、その内容が表示されます。ヘッダーでクエリが見つかった場合は、[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] をクリックします。その他のファイル形式はすべて除外されます。

   

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

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

   

   図 29. CSS ファイルと JS ファイルのみ表示中

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

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

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

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

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

   

   図 30. コマンド メニュー

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

   

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

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

4. タイプ main.css。

   

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

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

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

   

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

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

次のステップ

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

ネットワーク リファレンスで、ネットワーク アクティビティの検査に関連する DevTools のその他の機能を確認する。