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

Kayce Basques

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

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

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

[ネットワーク] パネルを使用する場面

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

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

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

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

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

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

   

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

   

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

   

   [DevTools] をウィンドウの下部にドッキングすることもできます。

   

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

   

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

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

ページが引き起こすネットワーク アクティビティを表示するには:

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

   

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

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

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

2. DevTools を開いている限り、ネットワーク アクティビティは [ネットワーク ログ] に記録されます。これを実証するために、まず [ネットワーク ログ] の下部を見て、最後のアクティビティをメモします。

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

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

   

詳細情報を表示

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

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

   

ネットワーク接続の速度が遅い状態をシミュレートする

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

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

   

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

   

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

   

   再訪問時には、ブラウザは通常、キャッシュから一部のファイルを配信するため、ページの読み込みが速くなります。[キャッシュの消去とハード再読み込み] を選択すると、ブラウザはすべてのリソースについてネットワークにアクセスします。これは、初回訪問者がページ読み込みをどのように体験するかを確認する場合に役立ちます。

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

スクリーンショットは、ページの読み込み中にさまざまなタイミングでページがどのように表示されるかをキャプチャし、各間隔で読み込まれるリソースをレポートします。

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

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

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

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

   

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

   

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

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

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

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

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

   

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

   

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

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

   

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

   

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

   

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

   

ネットワーク ヘッダーとレスポンスを検索する

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

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

1. パネルのアクション バーで [検索] search をクリックするか、Command+F キー（macOS）または Control+F キー（Windows / Linux）を押します。

   [検索] タブが [ネットワーク ログ] の左側に開きます。

   

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

   

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

   

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

   

リソースのフィルタ

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

[フィルタ] ツールバーはデフォルトで有効になっています。いいえ:

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

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

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

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] をクリックします。他のすべてのファイル形式は除外されます。

   

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

   

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

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

リクエストをブロック

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

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

   

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

   

3. [Add Pattern] ボタンをクリックします。

4. タイプ main.css。

   

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

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

   

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

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