DevTools の [Network] パネルを探索します

ジェフ・ポスニック（Jeff Posnick）氏

この Codelab では、やや複雑なサンプルアプリについて、すべてのネットワーク トラフィックを解釈するプロセスについて説明します。この演習を終えると、ウェブ アプリケーションの読み込み内容とリクエストのタイミングを把握するために必要なスキルが身に付きます。

[Network] パネルに移動して、デモ アプリケーションのネットワーク トラフィックを確認します。

  1. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。

  2. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。

  3. [Network] タブをクリックします。

  4. ページを再読み込みして、ネットワーク トラフィックを確認します。

[Network] パネルには、最初のナビゲーションで読み込まれたすべてのアセットが表示されます。

Chrome DevTools のネットワーク パネル。

エントリの解釈方法

記録されたネットワーク トラフィックの各行は、1 つのリクエストとレスポンスのペアを表します。

document タイプの最初の行は、ウェブアプリの HTML の最初のナビゲーション リクエストです。これがウォーターフォールのソースです。後続の追加のアセット（メイン ドキュメントのサブリソース）に対する後続のリクエストは、この元のソースからフローされます。

2 行目と 3 行目は、CSS stylesheet と script サブリソースの読み込みを示しています。これらは、メイン ドキュメントによって開始された依存リクエストです。

ウォーターフォール図では、これらのリクエストが行われるタイミングを見ると、ナビゲーション リクエストへのレスポンス プロセスのかなり後期まで開始されていないことがわかります。

まとめると、最初のナビゲーションでページ全体を表示するには、HTML ドキュメント、CSS、JavaScript のリクエストが必要になります。

追加のランタイム リクエストを作成する

[Network] パネルを開いて記録した状態のまま、多くのウェブアプリに共通する動作（最初のナビゲーションが完了した後にページにデータを追加するための追加の API リクエスト）をシミュレートします。

アプリで [Find Me] をクリックし、表示されるポップアップで [許可] をクリックして、これらの追加のリクエストをトリガーします。これにより、サイトが現在地にアクセスできるようになります。

位置情報の利用許可を求めるプロンプト。

ウェブアプリで場所を取得すると、[Find Nearby Wikipedia Entries] をクリックすると、追加のネットワーク リクエストがいくつか生成されます。次のように表示されます。

イメージ

新しいエントリを解釈する

前述のように、記録されたネットワーク トラフィックの各行は、1 つのリクエストとレスポンスのペアを表します。

新しいエントリの最初の行は fetch タイプのリクエストを表します。これは、ウェブアプリが Wikipedia API からのデータをリクエストする方法に対応しています。

次の行はすべて、Wikipedia のエントリに関連付けられた画像（png または jpeg）です。スクリーンショットでは少しわかりづらいですが、ウォーターフォールの列のエントリは API レスポンスから直接取得されています。

これらすべての追加リクエストの「タイミング」は、[Find Nearby Wikipedia Entries] をクリックする前にページを開いている時間によって異なります。ここで最も重要なのは、最初のナビゲーション リクエストから切断されるタイミングです。これは、ウォーターフォール表示の大きなギャップから判断できます。このギャップは、最初の読み込みから Wikipedia API リクエストが行われるまでにかかった時間を表します。

ナビゲーション後しばらくして行われたリクエストは、最初にページを表示したときに表示される最初のリクエスト セットとは異なり、「ランタイム リクエスト」のカテゴリに分類されます。

まとめ

この Codelab の手順を完了すると、どのウェブ アプリケーションが読み込まれるかを分析するために使用できるツールを理解できました。

[Network] パネルは、ウォーターフォール表示で、Name 列の URL と [Type] 列のデータ、読み込みのタイミングを介して、何を読み込むかという質問に答えることができます。

また、ウェブページからのリクエストは（通常は）次の 2 つのカテゴリのいずれかに分類できることも確認しました。

  1. 新しいページに移動した直後に行われる、HTML、JavaScript、CSS（場合によってはその他のアセット）に対する最初のリクエスト。
  2. ページでのユーザー インタラクションの結果として行われたランタイム リクエスト。多くの場合、これは API へのリクエストから始まり、取得した API データに基づいて複数のフォローアップ リクエストへと流れます。