連載
» 2018年11月07日 05時00分 公開

Google Chrome完全ガイド:Google ChromeのデベロッパーツールでWebサーバ/アプリとのプロトコルやスキームを調べる

Webサーバ/アプリとブラウザ間の通信に用いられているプロトコル(HTTP/1.1やHTTP/2など)およびスキーム(HTTPやHTTPSなど)を確認するには、Google Chromeのデベロッパーツールの[Network]タブで設定を変更します。

[島田広道,デジタルアドバンテージ]
「Google Chrome完全ガイド」のインデックス

連載目次

 Webサーバ/アプリの動作確認では、どのプロトコルでWebブラウザと通信しているのか、しばしば確認したくなることがあります。具体的にはHTTP/1.1やHTTP/2、SPDYといったプロトコルの種別が挙げられます。

 また非SSL接続の場合にWebブラウザが警告を表示するようになって、常時SSLが普及してきたこともあって、HTTPあるいはHTTPSといったスキームについても詳しく調べなければならないことがあります。しかしアドレスバー(オムニボックス)に表示されるスキームは読み込み対象のページの分しか表しておらず、別途読み込まれる画像やスタイルシート、JavaScriptファイル、あるいはREST APIの呼び出しなどのスキームは別途確認する必要があります。

 デスクトップ版Google Chrome(以下、Chromeと略)なら、通信中のプロトコルやスキームはデベロッパーツールで簡単に確認できます。ただし[Network]タブの設定の変更が必要です。

Chromeのデベロッパーツールでプロトコルやスキームを表示するには

 まずChromeで対象のWebページ/アプリを開いてから、Windows OSなら[F12]キー、macOSなら[Option]+[Command]+[I]キーを押してデベロッパーツールを開きます。

 次に[Network]タブを選択してから、[F5]キーを押して再度ページを読み込みます。その後に列の見出し([Name]や[Status]など)のいずれかを右クリックしてコンテキストメニューを開き、[Protocol]と[Scheme]をクリックしてそれぞれオンにします(チェックを入れます)。

Chromeのデベロッパーツールで通信中のプロトコルやスキームを確認する(1/2) Chromeのデベロッパーツールで通信中のプロトコルやスキームを確認する(1/2)
Chromeのデベロッパーツールで通信中のプロトコルやスキームを確認する(2/2) Chromeのデベロッパーツールで通信中のプロトコルやスキームを確認する(2/2)

 すると、[Protocol]列および[Scheme]列が追加され、読み込まれるファイルやAPI呼び出しごとにプロトコルとスキームを確認できるようになります。

 各プロトコル自体の詳細については、次の記事を参照してください。

 

別のブラウザだとプロトコルが変わることも

 ブラウザの種類やバージョンによって、Webサーバ/アプリとの通信プロトコルは変わることがあります。そのため上記の手順で得られた結果は、あくまでもChromeとの通信時の結果と考えるべきです。

 Mozilla Firefoxの場合、開発ツールの[ネットワーク]タブの[プロトコル]列と[スキーム]列に注目すると、上記のChromeと同様に確認できます。Microsoft Edgeの場合は、開発者ツールの[ネットワーク]タブの[プロトコル]列に注目すればよいでしょう。

■更新履歴

【2018/11/07】最新版のChromeの情報を反映しました。

【2016/10/21】初版公開。


「Google Chrome完全ガイド」のインデックス

Google Chrome完全ガイド

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。