この Codelab では、すべてのネットワークを解釈するプロセスについて説明します。 やや複雑なサンプル アプリケーションのトラフィックです。演習を終えると 独自のウェブ アプリケーションとは何かを理解するために必要なスキルが身に付きます。 リクエストを行うタイミングなどです。
[ネットワーク] パネルに移動する
[Network] パネルに移動して、デモのネットワーク トラフィックを確認します 説明します。
サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示
。Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[ネットワーク] タブをクリックします。
ページを再読み込みして、ネットワーク トラフィックを確認します。
[Network] パネルには、初期値 モジュールで読み込まれた ナビゲーション:
エントリの見方
記録されたネットワーク トラフィックの各行は、1 つのリクエストとレスポンスを表す ペア設定します。
最初の行（タイプ document）は、
作成します。これがウォーターフォールのソースです。以降のそれぞれの
追加アセット（メイン ドキュメントのサブリソース）のリクエスト フロー
元のソースから取得します
2 行目と 3 行目。CSS stylesheet と script サブリソースが表示されています。
メイン ドキュメントによって開始された依存リクエストです。
リクエストのタイミングを確認すると、ウォーターフォール図に インシデント対応プロセスの非常に後期まで開始されない リクエストできます。
まとめると、HTML ドキュメント、CSS、および 再生中にページ全体を表示するには、JavaScript が必要です。 使用します。
追加のランタイム リクエストを作成する
[Network] パネルが開いたままの状態で記録を取ったら、何かをシミュレートします。 多くのウェブアプリで一般的です。データを追加するために使用する追加の API リクエストです。 最初のナビゲーションが完了した後に ページを再表示できます
アプリで [Find Me] をクリックして追加リクエストをトリガーし、 表示されたポップアップで [許可] をクリックします。 これにより、サイトは位置情報にアクセスできるようになります。
ウェブアプリで作業対象の場所を取得したら、[付近の場所を検索 Wikipedia エントリにより、いくつかの追加のネットワーク リクエストが発生します。マイページ 次のようになります。
新しいエントリを解釈する
前と同じように、記録されたネットワーク トラフィックの各行は 1 つのリクエストを表します。 レスポンスのペアが含まれます。
新しいエントリの最初の行は、タイプが fetch のリクエストを表しています。
これは UDM イベントに
ウェブアプリがデータをリクエストする方法
ウィキペディアの API から取得します。
次の行はすべて、png または jpeg の
ウィキペディアのエントリ。スクリーンショットでは少しわかりにくいですが
エントリは、API レスポンスから直接流れます。
これらすべての追加リクエストのタイミングは、 そのページを開いたまま [付近の Wikipedia で探す] をクリックする前に エントリ。ここで最も重要なのは、When が Pod から 最初のナビゲーション リクエストこのことは、クラウド インフラストラクチャに存在する ウォーターフォール表示は、次の期間に経過した期間 Wikipedia API リクエストが行われたときに 通知を受け取ることができます
ナビゲーションから一定の時間が経過した後に行われたリクエストがこのカテゴリに分類される 「ランタイムリクエスト」です最初のリクエストセットは 表示されます。
まとめ
この Codelab の手順を終えたところで、 あらゆるウェブ アプリケーションが読み込むものを分析するために使用できるツールを紹介します。
[Network] パネルは、何を読み込むかという問いに答えるのに役立ちます。これには、 [Name] 列の URL と [Type] 列のデータ、および [when] ウォーターフォール表示で 読み込まれていることがわかります
また、ウェブページから送信されたリクエストは、 次の 2 つのカテゴリのいずれかになります。
- 新しいページに移動した直後に行われた、 HTML、JavaScript、CSS（および場合によってはその他のアセット）です。
- ページでのユーザー操作の結果として行われたランタイム リクエストです。この 多くの場合、API へのリクエストから開始し、その後、複数の Cloud Storage バケットに 取得した API データに基づいてフォローアップ リクエストを作成します。