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

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

こんにちは、marubon(@marubon_jp)です。

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

SPONSORED LINK

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にアクセスします。以下の画面が立ち上がります。

method-confirm-http-header-02

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

method-confirm-http-header-03

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

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

method-confirm-http-header-04

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

method-confirm-http-header-05

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

method-confirm-http-header-06 method-confirm-http-header-07

まとめ

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

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