[試] HTTPヘッダ確認方法 | HTTPリクエストヘッダ、HTTPレスポンスヘッダを取得して通信内容を確認

こんにちは、marubon（@marubon_jp）です。

サイト表示速度のチューニング等を行っているとHTTPヘッダをのぞきたくなる時があります。今回は、Google Chromeを使用したHTTPヘッダの確認方法を紹介します。

HTTPヘッダとは

HTTPとは、Hypertext Transfer Protocolの略で、WEBでリソースを取得する時に一般的に使用させるプロトコルです。RFC2616として仕様が策定されています。

HTTPヘッダとは、そのHTTPプロトコルのヘッダ情報のことです。ユーザエージェント（クライアント）とサーバ間の通信でやり取りされるWEBリソースのメタ情報が含まれます。

参考までに当サイト（http://marubon.info/）にアクセスした場合のHTTPヘッダ（HTTPリクエストヘッダ、HTTPレスポンスヘッダ）の一部をのせておきます。様々な情報が付加されていることがわかると思います。

以下がHTTPリクエストヘッダです。

以下がHTTPレスポンスヘッダです。

HTTPヘッダを確認する理由

HTTPヘッダ（HTTPリクエストヘッダ、HTTPレスポンスヘッダ）を確認することで、キャッシュの使用有無等、通信が意図した通りに実装されているか確かめることができます。

HTTPヘッダの確認方法

今回は、Google Chromeを使用した方法を紹介します。Google Chromeは、Web開発ツールが内蔵されており、その中にHTTPヘッダをトレースできる機能が存在します。

HTTPヘッダを確認するためには、まずGoogle Chromeでchrome://net-internals/#eventsにアクセスします。以下の画面が立ち上がります。

すでに通信内容をトレースしている状況です。任意のサイトにアクセスすると以下の通り、左のパネルにトレースされた通信の情報が出力されていきます。

HTTPヘッダ情報以外の通信に関する情報も出力されるため、このままだと必要な情報を探すのが大変です。そこで、Source TypeがURL_REQUESTの情報のみにフィルタリングします。

左パネル上部にある検索窓に「type:URL_REQUEST」を入力します。これは、Source TypeがURL_REQUESTの物のみを抽出するためのフィルタオプションです。以下の様にURL_REQUESTの情報のみが表示されるようになります。

確認したい情報を選択します。以下の様に右パネルに詳細が表示されます。

尚、上部メニューの右側の▼のメニューからResetを選択することで、現在取得されている通信情報をクリアする（消す）ことができます。

まとめ

Google Chromeを用いたHTTPヘッダ（HTTPリクエストヘッダ、HTTPレスポンスヘッダ）の確認方法を紹介しました。

この他にもGoogle Chromeでは、HTTP Headers等の拡張機能を用いた方法があります。基本的な情報のみを簡単に確認したい場合は、拡張機能を使った方がよいかと思いますが、通信の詳細を確認したい場合は、今回の方法をおすすめします。