こんにちは！kossyです！
さて、今回はchromeの検証ツールを使って、
QiitaのXHR通信を覗いて見る方法について、ブログに残してみたいと思います。
環境
MacBookAir
chrome検証ツールの開き方
chrome検証ツールは、Macの場合、command + option + i で開くことができます。
無事開くことに成功すると、上記の画像のような画面になります。
3点ボタンをクリックすると、検証ツールの表示位置を変更することができます。
私は下半分に表示するのがお気に入りなので、右から2番目を選択しています。
HTTP通信を覗いてみる
さて、準備はこれだけでOKなので、早速通信を覗いてみましょう。
にアクセスして、command + option + i で検証ツールを開きましょう。
そして、Networkタブを選択します。
このような表示になっていると思います。
ここで、検証ツールを開いたまま、画面のリロードを行ってみましょう。
Macの場合は、command + r でリロードをすることができます。
棒グラフのようになっている表示は、様々な通信が行われたことを表しています。
では、Nameの上部に「Qiita.com」と出ていると思いますので、そちらをクリックしてみましょう。
https://qiita.com/ に対してHTTP GETリクエストを送信し、ステータスコード 200 が返ってきていることがわかります。
次に、Responseタブを開いてみましょう。
よく見かけるHTMLのタグがありますね。
つまり、Nameのqiita.comの通信は、「https://qiita.com/ に対してHTTP GETリクエストを送信し、htmlを受け取っている通信である」ことがわかります。
その他にもいろんなデータをhttp通信で取得しているんですが、ここでは説明を割愛します。
XHR通信の結果を見てみる
先ほどリロードして表示された通信結果は、とくに通信結果をフィルタリングしない、「All」というタブを選択した状態でリロードを行ったため、画像等のリソースやjavascriptを取得するだけのリクエストも表示されていました。
昨今のWebサイトでは、通信を非同期的に行ってjsonを取得するような通信を行うことも多いです。
そのような非同期通信のみを表示するタブとして、「XHR」タブがあります。
では、Qiitaにログインした状態で、「XHR」タブを選択した状態で、適当な記事にアクセスして見ましょう。
Nameのところにgraphqlという文字が表示されていると思うので、クリックしてみます。
レスポンスとして、json形式のデータが返って来ていることがわかります。
Headerタブの中も見てみましょう。
https://qiita.com/graphql というエンドポイントに対して、POSTリクエストを送信して、HTTPステータスコード 200 が返って来ていることがわかります。
headerタブには、どのようにリクエストを送信したかの情報も記載されます。
下の方にスクロールしてみましょう。
GraphQLのqueryを投げていることがわかります。
Qiitaは一部の通信にGraphQLを採用しているんですね。
まとめ
ここまで、chromeの検証ツールを使って、QiitaがどんなHTTP通信を行っているかを覗き見して来ました。
結果として、Qiitaは一部の通信にGraphQLを採用していることがわかりました。
このように、chromeの検証ツールを使えば、Webサイトがどんな通信をしてどんなデータをとって来ているかがわかりますので、
普段の開発に役立てられることは間違いありません。
他にも様々な便利機能がありますので、より詳しく知りたい方は、
https://creive.me/archives/17517/
等のサイトを参考にして見てください。
