ネットワーク アクティビティの検査

  • [アーティクル]

ネットワーク ツールを使用して、リソースが期待どおりにダウンロードまたはアップロードされていることを確認します。 HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを調べます。

これは、ページのネットワーク アクティビティを検査するための、ネットワーク ツールの手順ごとのチュートリアル ウォークスルーです。

ネットワーク関連の DevTools 機能の概要については、「ネットワーク機能リファレンス」を参照してください。

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

通常、リソースが予期したとおりにダウンロードまたはアップロードされるようにする必要がある場合にネットワーク パネルを使用します。 ネットワーク パネルの最も一般的なユースケースは、次のとおりです。

  • リソースが実際にすべてアップロードまたはダウンロードされていることを確認する。

  • HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを検査する。

ページの読み込みのパフォーマンスを向上させる方法をお探しの場合は、ネットワーク パネルから開始しないでください。 ネットワーク アクティビティに関連しない読み込みパフォーマンスの問題には、さまざまな種類があります。 ページを改善する方法について的を絞った提案を提供する Lighthouse ツールから始めます。 「Lighthouse を使用して Web サイトの速度を最適化する」を参照してください。

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

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

  1. 新しいタブまたはウィンドウでネットワーク アクティビティの検査デモを開きます。

    デモ

  2. DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。 または、Ctrl+Shift+J (Windows、Linux) または Command+Option+J (macOS) を押します。 DevTools が開きます。

  3. DevTools のメイン ツールバーで、[コンソール] タブを選択します。そのタブが表示されない場合は、[その他のタブ] ([その他のタブ] アイコン。) ボタンをクリックします。

    コンソール。

    ウィンドウの下部に DevTools をドッキングすることをお勧めします。

    ウィンドウの下部にドッキングされた DevTools

  4. ネットワーク ツールを開きます。

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

ネットワーク ツールは最初は空です。 DevTools は、開始された場合のみネットワークアクティビティを記録し、DevTools を開始してからはネットワーク アクティビティは発生しません。

ネットワーク アクティビティをログする

ページによって発生するネットワークアクティビティを表示するには、次の操作を行います。

  1. Web ページを更新します。 ネットワーク パネルでは、ネットワーク ログにすべてのネットワークアクティビティが記録されます。

    ネットワーク ログ。

    ネットワークログの各行は、リソースを表します。 既定では、リソースは時系列順に表示されます。 トップリソースは、通常、メインの HTML 文書です。 一番下のリソースは、最後にリクエストされたものです。

    各列は、リソースに関する情報を表します。 前の図では、既定の列が表示されています。

    • 状態。 応答用の HTTP 状態コード。

    • 種類。 リソースの種類。

    • イニシエーター。 リソースによるリクエストの原因。 イニシエーター列のリンクを選ぶと、リクエストの原因になったソースコードが表示されます。

    • 時刻。 リクエストの期間。

    • ウォーター フォール。 リクエストの異なるステージのグラフィカル表現。 内訳を表示するには、ウォーターフォールにカーソルを合わせます。

    注意

    ネットワーク ログの上のグラフは概要と呼ばれています。 このチュートリアルの概要グラフは使用しないため、非表示にすることができます。 概要ウィンドウを非表示にするを参照してください。

    DevTools を開くと、ネットワーク ログにネットワーク アクティビティが記録されます。

  2. これを実践するには、まず ネットワーク ログ の下部を確認し、最後のアクティビティを頭で記録します。

  3. 次に、デモで データ取得 ボタンを選択します。

  4. もう一度 ネットワーク ログ の下部を確認します。 getstarted.json という名前の新しいリソースが表示されます。

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

詳細情報を表示する

ネットワークログの列は構成可能です。 使用していない列を非表示にできます。 既定では非表示になっていますが、役に立つと思われる列も数多くあります。

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

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

  2. 名前 列のセルの上にマウス ポインターを置いて、リソースの完全な URL を表示します。

低速ネットワーク接続のシミュレーション

サイトの構築に使用するコンピューターのネットワーク接続は、おそらく、ユーザーのモバイルデ バイスのネットワーク接続よりも高速です。 ページを調整して、モバイル デバイスでページが読み込まれるまでの時間を把握することができます。

  1. [スロットル] ドロップダウン リストを選択します。これは、既定で [スロットルなし] に設定されています。

  2. スロー 3G を選択:

    スロー 3G を選択します。

  3. [再読み込み] (Reload.) を長押しして（または [更新] を右クリックして)、[キャッシュをクリアしてハード リフレッシュ] を選択します。

    キャッシュをクリアしてハード リフレッシュします。

繰り返しアクセスした場合、ブラウザーは通常 キャッシュ の一部のファイルを提供します。これにより、ページの読み込みが高速化します。 キャッシュをクリアしてハード リフレッシュによって 、ブラウザーは強制的にすべてのリソースのネットワークに移動します。 初めての訪問者がページの読み込み方法を表示するために使用します。

キャッシュをクリアしてハード リフレッシュ ワークフロー は、DevTools が開いている場合にのみ使用できます。

ネットワーク機能リファレンスの 「低速ネットワーク接続をエミュレート する」も 参照してください。

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

スクリーンショットは、Web ページの読み込み中の時間の表示方法を表示します。

  1. [(ネットワーク設定) ] ボタンをクリックし、[スクリーンショットのキャプチャ] チェック ボックスをオン にします。

    ネットワーク設定の [スクリーンショットのキャプチャ] チェック ボックス。

  2. キャッシュをクリアしてハード リフレッシュ ワークフロー を使用してページを再び更新します。 この方法についてリマインダーが必要な場合は、低速接続をシミュレートする を参照してください。

    スクリーンショット ウィンドウには、読み込み処理中のさまざまなポイントでのページ表示方法についてサムネイルが表示されます。

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

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

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

  4. (ネットワーク設定) をもう一度選択し、[スクリーンショットをキャプチャする] チェックボックスをオフにして、スクリーンショット ウィンドウを閉じます。

  5. ページをもう一度更新してください。

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

リソースを選択して、詳細情報を参照します。

  1. network-tutorial/ を選択します。 ヘッダー タブが表示されます。 このタブを使用して、HTTP ヘッダーを検査します。

    [ヘッダー] パネル。

  2. [プレビュー] パネルを選択します。 HTML の基本的なレンダリングが表示されます。

    [プレビュー] パネル。

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

  3. [応答] パネルを選択します。 HTML ソースコードが表示されます。

    [応答] パネル。

    ヒント: ファイルが縮小されたら、応答パネルの下部にある [フォーマット (フォーマット)] ボタンを選択して、読みやすくするためにファイルの内容を再フォーマットします。

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

    [タイミング] パネル。

  5. 閉じる (閉じる) を選択して、もう一度ネットワーク ログを表示します。

    閉じる ボタン

ネットワークのヘッダーと返信を検索する

特定の文字列または正規表現に関するすべてのリソースの HTTP ヘッダーと応答を検索する必要がある場合は、検索 ウィンドウを使用します。

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

  1. 検索 (検索) を選びます。 [検索] ウィンドウがネットワーク ログの左側に表示されます。

    検索 ウィンドウ

  2. no-cache を入力し、Enter を押します。 [検索] ウィンドウには、リソース ヘッダーまたはコンテンツ内で見つかった no-cache のすべてのインスタンスが一覧表示されます。

    キャッシュなしの検索結果。

  3. 結果を選択すると、結果が見つかったリソースが表示されます。 リソースの詳細を参照している場合は、結果を選択して直接移動します。 たとえば、ヘッダーでクエリが見つかった場合、[ヘッダー] タブが開きます。 コンテンツ内にクエリが見つかった場合は、応答 タブが開きます。

    ヘッダー タブで強調表示された検索結果

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

リソースをフィルター処理する

DevTools には、タスクに直接関連していないリソースをフィルター処理する多数のワークフローが用意されています。

フィルター ツールバー

フィルター ツールバーは、既定で有効になっています。 [フィルター] ツールバーがオンではない場合は、[フィルター] (フィルター) をクリックして表示します。

文字列、正規表現、またはプロパティによってフィルターする

フィルター テキスト ボックスでは、さまざまな種類のフィルターがサポートされています。

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

    文字列フィルター。

  2. 「/.*\.[cj]s+$/」と入力します。 DevTools では、末尾が j または c で終わらず、1 つ以上の s 文字が続いているファイル名で任意のリソースをフィルター処理 します。

    正規表現フィルター

  3. 「-main.css」と入力します。 DevTools で main.css をフィルターします。 そのパターンに一致するファイルがある場合は、次のファイルもフィルター処理されます。

    ネガティブ フィルター

  4. larger-than:1000 を フィルター処理 テキスト ボックスに入力します。 DevTools は、1000 バイト未満の応答を持つリソースをフィルター処理します。

    プロパティ フィルター

    フィルター可能なプロパティの完全な一覧については、「プロパティで要求をフィルター処理する」を参照してください。

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

リソースの種類でフィルター処理する

スタイルシートなど、特定の種類のファイルに重点を置く場合は、次の操作を行います。

  1. [CSS] を選択します。 その他のすべての種類のファイルはフィルター処理されます。

    CSS ファイルのみを表示する

  2. スクリプトも表示するには、キーを押したまま Control (Windows Linux) または Command (macOS) を押し、JS をクリックします。

    CSS と JS ファイルのみを表示する

  3. フィルターを削除してすべてのリソースを再度表示するには、[すべて] を選択 します。

その他のフィルターワークフローについては、「要求をフィルタ処理する」を参照してください。

リクエストをブロック

ページリソースの一部が利用できない場合、ページはどのように表示され、どのように動作しますか? 完全に失敗しましたか? それとも、まだ機能していますか? リクエストをブロックして、以下の内容を見つけます:

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

  2. block と入力し、[要求ブロックの表示] を選択し、Enter を押します 。

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

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

  4. main.css と入力します。

    'main.css' をブロックします。

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

  6. ページを最新の情報に更新してください。 予想通り、メインのスタイル シートがブロックされているため、ページのスタイルが少し乱れています。

    ネットワーク ログ の main.css行の赤いテキストは、リソースがブロックされたことを示しています。

    main.css がブロックされています

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

まとめ

おめでとうございます。これでチュートリアルは完了です。 Microsoft Edge DevTools での ネットワーク パネルの使い方を理解できました。

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

注意

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは こちら にあり、Kayce Basques (テクニカル ライター、Chrome DevTools \＆ Lighthouse) によって作成されています。

Creative Commons ライセンス。 この著作物は、Creative Commons Attribution 4.0 International License に従って使用許諾されています。