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

Jeff Posnick

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

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

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

  2. Ctrl+Shift+J（Mac の場合は Command+Option+J）キーを押して、デベロッパー ツールを開きます。

  3. [ネットワーク] タブをクリックします。

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

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

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

エントリの解釈方法

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

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

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

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

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

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

[ネットワーク] パネルを開いたままで、多くのウェブアプリでよく見られるシミュレーションを行います。これは、最初のナビゲーションの完了後にページにデータを追加するために使用される追加の API リクエストです。

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

位置情報の利用許可を求めるメッセージ。

ウェブアプリが処理する場所を指定すると、[近くの Wikipedia エントリを検索] をクリックすると、さらにいくつかのネットワーク リクエストが発生します。次のような出力が表示されます。

画像

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

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

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

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

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

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

まとめ

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

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

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

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