【HTTPヘッダ, 検証モード】APIにリクエストをしたときのリクエスト・レスポンスヘッダを確認する。

概要

こんにちは、今日はAPIにリクエストを行った時のリクエストヘッダとレスポンスヘッダの確認方法を説明します。
自分はフロントエンドからRailsで開発したバックエンドのAPIにPOSTを行ったのですが、その際にCookieをしっかり渡せているかの確認のために用いました。

手順

1. 実際にHTTPリクエストを行うページをブラウザで表示する。（例）https://localhost:3000など
2. 右クリックし、検証をクリック
3. Elementsの右側にあるNetworkを選択する。
4. Networkを選択した後に実際にHTTPリクエストを行う。 （例）ブラウザ上に配置したボタンなどをクリック
5. Nameという行に行ったHTTPリクエストのURLに対応するものが表示されるのでそこをダブルクリック
6. リクエストヘッダとレスポンスヘッダが表示される

注意事項

以上のようにすれば基本的にすんなりとできると思います。
注意事項としては

• GoogleChromeで開けていない
• Networkが >> のボタンに隠れている
• Networkのボタンを押す前にHTTPリクエストを送ってしまっている。

などが挙げられると思います。

まとめ

自分はCookieをバックエンドへ送る必要があったため、この検証機能を利用して、リクエストヘッダの中身を確認しました。
他にはCSRF対策で用いられるCSRFトークンがきちんと送られているかといった確認にも用いることができると思います。
割とよく使う機能だと思うのでぜひやってみてください！