通常、ウェブブラウザでウェブサイトにアクセスすると、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」キーを押すと表示される。 メニューから選択しても良い。 また、ウェブページを表示した後、右クリックし、表示されたメニューからChromeは「検証」、Edgeは「開発者ツールで調査する」、Firefoxは「調査」を選択しても良い。
ディベロッパーツールは、JavaScriptを使っている人にはコンソールでお馴染みかもしれない。
ヘッダーの表示は[コンソール(Console)]タブではなく[ネットワーク(Network)]タブを使う。 サイトを表示してからネットワークタブを開いても何も表示されない。 ネットワークタブが選択された状態でサイトにアクセスする必要がある。 サイトにアクセスするとHTML、CSS、JS、画像などそのページで使われているすべてのデータ(リソース)が一覧表示される。 アクセスしたページ自体の情報は、概ねその一覧の一番上か上の方に表示される。 一覧からそのページを選択すると、右側にヘッダーが表示される。
ブラウザごとに項目名やデフォルトの表示が異なるが、以下のような項目が確認できる。
デフォルトで表示されている項目は、追加や削除ができる。 「プロトコル」や「ドメイン」など表示されている適当な項目の上にマウスカーソルを合わせて右クリックすると、表示可能な項目の一覧が表示される。 さらにChromeは「レスポンスヘッダー」、Firefoxは「応答ヘッダー」に「Content-Encoding」などの項目がある。 自分に必要な項目をチェックして有効にする。
個人的には最近、Content-Encoding をチェックしている。
以下、主なブラウザの設定。
HTTPのバージョンは、以下の手順で確認できる。
なお、Microsoft Edge は、Chromiumベースなので基本的にChromeと操作手順は同じ。 Edgeでは「開発者ツール」という名称になっている。
プロトコルにてh2と表示されているのはHTTP/2のこと。 h3はHTTP/3。
ヘッダー情報は「名前」から見たいリソースを選択し、右側に表示されたウィンドウの「ヘッダー」タブを見る。 「全般」、「レスポンスヘッダー」、「リクエストヘッダー」がある。 一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある「すべて」、「ドキュメント」、「CSS」などのフィルターから「ドキュメント」を選択する。
Firefox は、以下の手順でヘッダーを確認できる。
Firefoxでは、プロトコルは HTTP/2 や HTTP/3 などと表示される。
一覧表示されたファイルからヘッダーを見たいリソースを選択し、右側に表示されたウィンドウの「ヘッダー」タブにヘッダー情報がある。 「応答ヘッダー」、「要求ヘッダー」がある。 「バージョン」のところに「HTTP/2.0」などが表示されている。
一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある「すべて」、「HTML」、「CSS」などのフィルターから「HTML」を選択する。
ウェブ業界であまり好かれていない Internet Explorer は意外にも HTTP/2 か否かが分かる。
Internet Explorer は以下の手順でヘッダーを確認できる。
一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある[▼コンテンツの種類]から[ドキュメント]を選択する。