クラッシュコース101
10 モジュール
5 週

ネットワークへの要望

クリックでコピー

ネットワークからの詳細情報要求の追跡


Developer Tools のもうひとつの便利なセクションは Network.この中では、すべてのネットワークリクエストとその詳細情報を追跡し、受信した回答を解析することができます。国に関する情報を持つテーブルの例を見てみましょう。これはモジュール8で作成されたもので、このテーブルに情報を入力するために、ある要求がなされなければならないことが確実に分かっています。 GETリクエストはこのテーブルに入力するために行われなければならないことが分かっています。対応するページを開いて、リクエストが実際に送信され、正しく構成されていることを確認しましょう。

テーブルは正しく作られ、自動的に入力されます。したがって、リクエストを送るという事実そのものに疑問はありません。に確かに見ることができます。 Networkセクションで見ることができます。しかし、その潜在的な欠如は、なぜテーブルにデータがないのかの答えを与えるだけかもしれない。この場合、リクエストの不在の理由を探す必要があることが明らかになります。 GETリクエストを送信するための正しいトリガーが設定されていない、トリガーをアクティブにするイベントが発生しない、ビジネスプロセスがエラーでコンパイルされた、などの可能性があります)。

必要な情報を表示するのに便利なように、すぐに Fetch / XHRフィルタ(この段階で不要な各種サービスリクエストは表示されません)を即座に有効にしたり、キーワード検索を使用することもできます。

Headers

ここでは、リクエストを詳細に解析し、正しく作成されていることを確認することができます。この例では Headersタブ (General -> Request URL) には、使用されているパラメータとともに、 リクエストがすべて表示されています。

パラメータが設定されていることが確認できる。

  • _offset=0-データをそのまま、最初から、インデント無しで要求する。
  • _with=1- 国に関する情報だけでなく、関連する表の情報も要求される (この場合、1 は都市に関する情報を取得することを意味する)。
  • _limit=10- リクエストは最初の 10 個の要素に限定される
  • _sort_order=ASC- 昇順でソートされたデータ
  • _sort_by=name- 名前でソートされたデータ

同じパラメータが Payloadタブで見ることができます。これは、リクエストの構成を詳しく調べる必要がある場合に関連します。これはしばしば POSTリクエストを送信するとき、データベースに書き込むためにモデルオブジェクトが渡され、その構造を詳しく検討する必要があるときです。

Preview

しかし、最も関心があるのは、リクエストそのものではなく、それに対する答え、つまりリクエストの結果であることが多い。それを構造化された形で見ることができるのが Previewタブで見ることができます。

この例では、3つの国に関する情報が応答として受信されたことがわかります。また、それらの名前、説明、関連する都市に関するデータ、各種サービス情報(ID、作成時間、変更時間など)も見ることができます。ここにデータがないことで、このデータもテーブルにないことが説明できる(つまり、このデータを取得するはずのビジネスプロセスを理解する必要がある)。またはその逆で、追加データがあれば、表をより詳細にすることができることが明らかになる。

Was this article helpful?
まだ答えをお探しですか?