HTTPレスポンスヘッダやリクエストヘッダをブラウザで表示する方法。
通常ウェブブラウザでサイトにアクセスすると、HTMLの他にヘッダ情報も取得しているが、通常はHTML部分しか表示されない。 ヘッダにはリクエストヘッダ(要求ヘッダ)とレスポンスヘッダ(応答ヘッダ)がある。 以下にレスポンスヘッダの例を記す。
HTTP/1.1 200 OK Date: Wed, 12 Jul 2017 09:50:41 GMT Server: Apache Connection: close Content-Type: text/html; charset=UTF-8
レスポンスヘッダには、HTTPのバージョン、リクエストメソッド、ステータスコード、エンコーディングなどが表示される。
ヘッダを確認できるソフトウェアもあるが、ブラウザの開発ツールを使ってアドオンを使わなくても確認できる。 開発ツールは、どのブラウザでもキーボードの[F12]キーを押すと表示される。 JavaScriptを使っている人には開発ツールのコンソールでお馴染みかもしれない。
ヘッダの表示は[コンソール(Console)]タブではなく[ネットワーク(Network)]タブを使う。 重要なのは、サイトを表示してからネットワークタブを選択するのではなく、ネットワークタブが選択された状態でサイトにアクセスすること。 サイトにアクセスするとHTML、CSS、JS、画像などそのページで使われているすべてのデータ(リソース)が一覧表示される。 アクセスしたページ自体の情報は、概ねその一覧の一番上か上の方に表示される。 一覧からそのページを選択すると、右側にヘッダが表示される。
最近は HTTP/2 を導入するレンタルサーバーも増えてきて、自分のサイトは HTTP/1.1 と HTTP/2 どちらが使われているのか、本当に HTTP/2 になっているのかどうか確認したい人もいるだろう。 Firefox と Internet Explorer 11 は HTTP のバージョンが表示される。 ただ、HTTP/2 対応を謳うレンタルサーバーでも基本的に http 接続時は HTTP/1.1 のままで、https で接続しないと HTTP/2 にならないので注意する。
ヘッダ情報を確認する基本的な操作方法はどのブラウザも同じだが、以下にブラウザごとに記す。
Chrome は HTTP のバージョンが表示されないと思っていたら、初期状態では表示されないだけだった。
以下の手順で確認できる。
ヘッダ情報は、Name から見たいものを選択し、右側に表示されたウィンドウの[Headers]タブを見る。 ちなみにHTMLは[Response]タブにある。 一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[All][XHR][JS][CSS]などから[Doc]を選択する。
Firefox は HTTP/1.1 や HTTP/2 などHTTPバージョンを確認できる。
Firefox は以下の手順でヘッダを確認できる。
一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[すべて][HTML][CSS]などから[HTML]を選択する。
ウェブ業界であまり好かれていない Internet Explorer は意外にも HTTP/2 か否かが分かる。
Internet Explorer は以下の手順でヘッダを確認できる。
一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[▼コンテンツの種類]から[ドキュメント]を選択する。