はじめに

ブラウザの検証ツールには便利な機能がたくさんありますが、今回はその中でもNetworkタブのXHR通信に絞って、
どんなことがわかるのかについて、解説したいと思います。

Chrome検証ツールとは

WebページのHTMLやCSSの中身や、ブラウザがどんな通信をしているかを確認することができます。(もちろん他にも機能はあります)

MacOSの場合は、 command + option + i で開くことができます。
あるいは右クリック → 検証でも同様に開けます。

XHR通信の中身を覗いてみる

Qiitaの通信内容をchrome検証ツールを使って見てみます。

Nameタブのgraphqlをクリックすると、添付画像右のような情報が表示されます。

リクエスト先のURLやHTTPメソッド、HTTPステータス等がわかります。

Qiitaは一部の通信にGraphQLを採用していたんですね。

Headersタブを下にスクロールすると、送ったリクエストの中身も確認することができます。

GraphQLのQueryをargument付きで投げていることがわかります。

投げているQueryも確認することができます。

query getUserPaginatedArticles($urlName: String!, $page: Int!, $per: Int!) {
  user(urlName: $urlName) {
    paginatedArticles(page: $page, per: $per) {
      ...UserPaginatedArticlesResult
      __typename
    }
    __typename
  }
}

fragment UserPaginatedArticlesResult on ArticlePage {
  items {
    createdAt
    encryptedId
    isLikedByViewer
    isPublic
    likesCount
    linkUrl
    title
    uuid
    author {
        ... on User {
          isUser
        urlName
        __typename
      }
      ... on Organization {
        isUser
        urlName
        __typename
      }
      __typename
    }
    tags {
        urlName
      name
      __typename
    }
    __typename
    }
    pageData {
      currentPage
    isFirstPage
    isLastPage
    nextPage
    prevPage
    totalPages
    __typename
  }
  __typename
}

レスポンスの中身は、PreviewタブかResponseタブで確認することができます。

他のサイトのXHR通信の中身を覗いてみる

以下の添付画像をご覧ください。

access-tokenやclientがResponseHeaderに含まれているあたり、

「認証はToken方式で」
「おそらくdevise_token_authを使っている」

のではないかと思いますが、Previewも見てみましょう。(レスポンスの一部を切り取っています)

{
  "user": {
    "id": 99999999,
    "provider": "email",
    "uid": "sample@gmail.com",
    "allow_password_change": false,
    "email": "sample@gmail.com",
    "created_at": "2021-02-20T00:00:00.000+09:00",
    "updated_at": "2021-02-20T00:00:00.000+09:00",
    "deleted_at": null,
    "name": "サンプル太郎",
  }
}

devise_token_authを導入していると用いられる「provider」や「uid」があったため、おそらく仮説は当たっていると思います。
また、deleted_atがあるので、論理削除を実現するGemである「acts_as_paranoid」も導入されているのではないかなと思いました。

このように、Network通信の中身を覗くことで、そのサイトでどんな技術を使っているか、という情報を得られます。

実務ではどう使うのか

主に、

・入力した値が意図した通り送信されているか
・意図した値が返ってきているか

という用途で使うことが多いです。

入力した値が意図した通り送信されているか

フォームに入力された値をjavascriptでよしなに加工して送信する、といった処理がある場合、値を加工する部分でバグがあり意図した挙動になっていないことがありますが、そういった挙動の確認をするために検証ツールを使うことがあります。

意図した値が返ってきているか

APIの戻り値をjavaScriptで加工してで表示するというケースはよくあると思いますが、フロント側で欲しい値がなぜか返ってきていない、というケースで、PreviewタブやResponseタブの値を見て確認するというケースがよくあります。

まとめ

検証ツール便利すぎてこれ無しだと生きていけません。