HTTPレスポンスヘッダ・リクエストヘッダ情報をウェブブラウザで表示・確認する方法

更新:

HTTPレスポンスヘッダやリクエストヘッダをブラウザで表示する方法。

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 66 など

Chrome は HTTP のバージョンが表示されないと思っていたら、初期状態では表示されないだけだった。

以下の手順で確認できる。

  1. Chrome を起動し、キーボードの[F12]キーを押して「デベロッパーツール」を表示する。
  2. [Network]タブを選択した後、適当なサイトにアクセスする。
  3. ページのリソースが一覧表示されると、Name、Status、Type などの項目が表示され、その項目上で右クリックするとコンテキストメニューが表示されるので Protocol にチェックを入れると項目に追加される。
  4. Protocol にて h2 と表示されているのは HTTP/2 のこと。 場合によっては http/2 と表示されるものもある。

ヘッダ情報は、Name から見たいものを選択し、右側に表示されたウィンドウの[Headers]タブを見る。 ちなみにHTMLは[Response]タブにある。 一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[All][XHR][JS][CSS]などから[Doc]を選択する。

Firefox 60 など

Firefox は HTTP/1.1 や HTTP/2 などHTTPバージョンを確認できる。

Firefox は以下の手順でヘッダを確認できる。

  1. Firefox を起動し、キーボードの[F12]キーを押して「開発ツール」を表示する。
  2. [ネットワーク]タブを選択した後、適当なサイトにアクセスする。
  3. 一覧表示されたデータからヘッダを見たいものを選択し、右側に表示されたウィンドウの[ヘッダー]タブを見る。 「バージョン」のところに「HTTP/2.0」などが表示される。 ちなみにHTMLは[応答]タブにある。

一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[すべて][HTML][CSS]などから[HTML]を選択する。

Internet Explorer 11

ウェブ業界であまり好かれていない Internet Explorer は意外にも HTTP/2 か否かが分かる。

Internet Explorer は以下の手順でヘッダを確認できる。

  1. Internet Explorer を起動し、キーボードの[F12]キーを押して「開発者ツール」を表示する。
  2. [ネットワーク]タブを選択した後、適当なサイトにアクセスする。
  3. 一覧表示されたデータからヘッダを見たいものを選択し、右側に表示されたウィンドウの[ヘッダー]タブを見る。 Internet Explorer はここに HTTP のバージョンは表示されないが、一覧の「プロトコル」の項目に「HTTP」や「HTTPS」が表示され、HTTP/2 は「HTTP/2」と表示される。

一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[▼コンテンツの種類]から[ドキュメント]を選択する。


このエントリーをはてなブックマークに追加