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

更新：2024-10-03

通常、ウェブブラウザでウェブサイトにアクセスすると、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、画像などそのページで使われているすべてのデータ（リソース）が一覧表示される。アクセスしたページ自体の情報は、概ねその一覧の一番上か上の方に表示される。一覧からそのページを選択すると、右側にヘッダーが表示される。

ブラウザごとに項目名やデフォルトの表示が異なるが、以下のような項目が確認できる。

プロトコル: HTTP/1.1、HTTP/2、HTTP/3 など通信プロトコルのバージョン表示。基本的に https で接続しないと HTTP/2 や HTTP/3 にならない。
ドメイン: リソースのドメイン名。
ステータス: 200、301、404などのHTTPステータスコード。
タイプ: HTML、CSS、JS、JPEGなどファイルのタイプ。MIMEタイプなど。
サイズ: ファイルサイズ。
時間: データをダウンロードするのに要した時間。
Content-Encoding: ページやデータのエンコーディング（圧縮）方式。gzip、deflate、br（Brotli）、zstd などがある。

デフォルトで表示されている項目は、追加や削除ができる。「プロトコル」や「ドメイン」など表示されている適当な項目の上にマウスカーソルを合わせて右クリックすると、表示可能な項目の一覧が表示される。さらにChromeは「レスポンスヘッダー」、Firefoxは「応答ヘッダー」に「Content-Encoding」などの項目がある。自分に必要な項目をチェックして有効にする。

個人的には最近、Content-Encoding をチェックしている。

以下、主なブラウザの設定。

Google Chrome

HTTPのバージョンは、以下の手順で確認できる。

なお、Microsoft Edge は、Chromiumベースなので基本的にChromeと操作手順は同じ。 Edgeでは「開発者ツール」という名称になっている。

Chromeを起動し、キーボードの「F12」キーを押して「デベロッパーツール」を表示する。
「ネットワーク」タブを選択した後、適当なサイトにアクセスする。
ページのリソース一覧が表示されると、名前、ステータス、タイプなどの項目が表示される。それらの項目の上にマウスカーソルを合わせて右クリックするとコンテキストメニューが表示されるので「プロトコル」にチェックを入れる。 Chromeのバージョンによってはデフォルトでチェックが入っている場合があるかもしれない。

プロトコルにてh2と表示されているのはHTTP/2のこと。 h3はHTTP/3。

ヘッダー情報は「名前」から見たいリソースを選択し、右側に表示されたウィンドウの「ヘッダー」タブを見る。「全般」、「レスポンスヘッダー」、「リクエストヘッダー」がある。一覧の中からページのファイルが見つけにくい場合は、一覧の上部にある「すべて」、「ドキュメント」、「CSS」などのフィルターから「ドキュメント」を選択する。

Firefox

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

Firefox を起動し、キーボードの「F12」キーを押して「開発ツール」を表示する。
「ネットワーク」タブを選択した後、適当なサイトにアクセスする。
ページのリソース一覧が表示されると、ファイル、ステータス、タイプなどの項目が表示される。それらの項目の上にマウスカーソルを合わせて右クリックするとコンテキストメニューが表示されるので「プロトコル」にチェックを入れる。 Firefox は基本的にデフォルトでチェックが入っている。

Firefoxでは、プロトコルは HTTP/2 や HTTP/3 などと表示される。

一覧表示されたファイルからヘッダーを見たいリソースを選択し、右側に表示されたウィンドウの「ヘッダー」タブにヘッダー情報がある。「応答ヘッダー」、「要求ヘッダー」がある。「バージョン」のところに「HTTP/2.0」などが表示されている。

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

Internet Explorer 11

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

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

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

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

はてな

Bluesky

カテゴリ