2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(WEB パフォーマンス, サーバー)の記事

Chrome で WEB レスポンスヘッダ と リクエストヘッダの内容を確認する



人気の WEB ブラウザである Google Chrome は開発ツールとしても多機能でとっても使いやすかったりします。

サーバー(DNS)の切り替え時とか PHP などの開発途中で HTTP 通信の内容(HTTPリクエストヘッダ、HTTPレスポンスヘッダ)を確認したい場合がありますが、Google Chrome ではアドオンなどは何も追加せずに、標準でついている Chrome Developer Tools でそれらを確認する事ができます。

HTTP 通信を確認する方法

1. Chrome のメニューから「View」→「Developer」→「Developer Tools」を選択して、Chrome Developer Tools を開きます。

Developer Tools  http dev ontheroad jp archives 9270

2. 『Network タブ」をクリックします。

Developer Tools  http dev ontheroad jp archives 9270 1

「Network タブ」をクリックしても何も表示されない場合は、WEB ページをリロードすれば表示させると思います。


3. HTTP 通信の内容を見たいリソースをクリックして「Headers タブ」をクリックします。

Developer Tools  http dev ontheroad jp archives 9270 3

4. そうすると、HTTP リクエストヘッダ と HTTP レスポンスヘッダの中身が整理(パース)された形で表示されます。

Developer Tools  http dev ontheroad jp archives 9270 4


おまけ

「Request Headers」または「Response headers」の横に表示されている「view source」をクリックすると、整形される前の HTTP ヘッダを見ることが出来ます。

Developer Tools  http dev ontheroad jp


まとめ

Google Chrome はブラウザとしても優秀なわけですが、アドオンなしで標準機能で HTTP 通信の中身も見れちゃいます。

開発ツールとしても Chrome は手放せませんね。もちろん Firefox とかでもアドオン(または標準機能)で同じようなことは出来ますが・・

でわでわ。





「Chrome で WEB レスポンスヘッダ と リクエストヘッダの内容を確認する」に頂いたコメント

  1. […] http://dev.ontheroad.jp/archives/11970 ↑でHTTP 通信の内容をChromeで確認できるとのことでさっそく試してみました。 以下にその時の通信内容をキャプチャした画像を添付します。 […]

この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.