Google Chrome でHTTPヘッダー情報を確認する方法

どうも、スマコマのコマ太郎です。

HTTPヘッダーとは、HTMLファイルを受信するために事前にやり取りされるデータのことです。

通常、ブラウザでHTTPヘッダー情報を見ることはありませんが、トラブルシューティングなどで利用できる情報が含まれるので、今回、HTTPヘッダーを確認する方法を備忘録として残しておこうと思います。

ブラウザでHTTPヘッダーを確認する方法

今回は google chrome で HTTPヘッダーを確認する方法をご紹介します。ちなみに firefox、ie などでも可能です。

さて。まずは google chrome で調査をしたい該当ページを開き、F12キーを押しデベロッパーツールを呼び出します。

chrome デベロッパーツール

呼び出されたデベロッパーツール上部にある [NETWORK]タブをクリックします。

デベロッパーツールのNETWORK画面

NETWORK画面で、Ctrl+R を押します。これが重要で、HTTPヘッダー情報はHTMLファイルを受信する際にやり取りされるので、再度リクエストを送信しないと情報が表示されません。

HTTPヘッダーを確認する

リクエストを送信するとデータの送受信が開始され、いろいろデータが表示されます。情報がスクロールするほどあると思うので、一番上までスクロールバーを上げてください。

先頭のファイルが元になる HTMLファイルです。これを（シングル）クリックしてください。

HTTPヘッダー情報が表示された画面

HTTPヘッダー情報が右側に表示されます。リクエストヘッダー、レスポンスヘッダーなどのデータが表示されていると思います。

Google Chrome でHTTPヘッダー情報を確認する方法のまとめ

備忘録がてら書いてみた記事ですが、意外と需要があったみたいですね。

Chrome でHTTP header 情報を取得するには、デベロッパーツールを開いて、再度リクエストしないといけない点がポイントです。