1. HOME
  2. PC
  3. Linux
  4. Chrome で WEB レスポンスヘッダ と リクエストヘッダの内容を確認する
2015年08月13日
git で簡単バックアップしてみる
2014年04月18日
SSH の config ファイルの場所と作成方法
2014年08月04日
SSH 接続してエックスサーバーのディスク使用量を確認する ...
2015年06月05日
エックスサーバーに vim をインストールしてみた
2012年12月11日
エックスサーバーにあるデータのバックアップをしてみた。 ...
2014年04月17日
SSH の文字化け対策

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 とかでもアドオン(または標準機能)で同じようなことは出来ますが・・

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

でわでわ。







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

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

この記事にコメントする





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