1. HOME
  2. 開発・ブログ運営
  3. WEB パフォーマンス
  4. Chrome で WEB レスポンスヘッダ と リクエストヘッダの内容を確認する
2014年09月23日
CSS と Javascript の読み込み順序を変えてみた ...
2014年08月21日
エックスサーバーでブラウザキャッシュ(mod_expires) ...
2012年12月06日
Facebook の「いいね」ボタンやコメントボックスを外した ...
2014年09月25日
WordPress で簡単にスマホ対応出来るプラグイン WPt ...
2014年08月08日
Chrome で WEB レスポンスヘッダ と リクエストヘッ ...
2012年11月16日
Google の Chrome Developer Tools ...

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 - 2014 MacBook Air とWordPressでこうなった All rights reserved
Powered by WordPress.