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

Jeff Posnick

この Codelab では、やや複雑なサンプル アプリケーションのすべてのネットワーク トラフィックを解釈するプロセスについて説明します。この演習を終えると、独自のウェブ アプリケーションが何を読み込んでいるのか、いつ各リクエストを行っているのかを把握するために必要なスキルを習得できます。

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

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  2. [ネットワーク] タブをクリックします。
  3. ページを再読み込みして、ネットワーク トラフィックを確認します。

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

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

エントリの解釈方法

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

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

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

これらのリクエストがいつ行われたかを確認すると、ウォーターフォール図では、ナビゲーション リクエストへの応答プロセスの非常に遅い段階まで開始されていないことがわかります。

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

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

[ネットワーク] パネルを開いたまま記録している状態で、多くのウェブアプリで一般的な動作をシミュレートします。これは、最初のナビゲーションが完了した後に、ページにデータを追加するために使用される追加の API リクエストです。

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

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

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

イメージ

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

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

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

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

これらの追加リクエストはすべて、[Find Nearby Wikipedia Entries] をクリックする前にページを開いていた時間に基づいて、when が変化します。ここで最も重要なのは、いつが最初のナビゲーション リクエストから切り離されていることです。これは、ウォーターフォール表示に大きなギャップがあることからわかります。このギャップは、最初の読み込みから Wikipedia API リクエストが行われるまでの経過時間を表しています。

ナビゲーション後に一定の時間が経過してから行われるリクエストは、「ランタイム リクエスト」のカテゴリに分類されます。これは、最初にページに移動したときにページを表示するために使用される最初のリクエスト セットとは異なります。

まとめ

この Codelab の手順を完了したことで、あらゆるウェブ アプリケーションが読み込む内容を分析するために使用できるツールについて理解できました。

ネットワーク パネルでは、[Name] 列の URL と [Type] 列のデータから、読み込まれている内容を確認できます。また、ウォーターフォール表示から、読み込まれたタイミングを確認できます。

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

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