こんにちは、Internet Explorer サポートの片岡です。
私からは、Internet Explorer サポート チームで実際に調査を行う際に使用するツールについてご紹介していきたいと思います。
第一弾として、今回は Fiddler というツールをご紹介します。
Fiddler とは、HTTP(S) の通信ログを取得するツールです。しかも、Fiddler は HTTP の通信ログを取得するだけでなく、そのログから様々な検証が行えるため、私たちは非常に重宝しています。
今回のブログの目次は以下の通りです。
0. Fiddler をインストールする
1. Fiddler で通信ログを取得する
2. HTTP レスポンスを編集する
3. ログを使用して事象を復元する
スクリーン ショットなども交えつつ、具体的な使用方法をご紹介していきます。
0. Fiddler をインストールする
Fiddler は、以下の URL からダウンロード/インストールができます。[Free download] のボタンがありますので、クライアントにインストールされている .NET Framework に合ったバージョンをインストールしてください。
Fiddler
http://www.telerik.com/fiddler
1. Fiddler で通信ログを取得する
インストールされた Fiddlerを開くと、下記のスクリーン ショットの画面が起動します。この画面から、[File] – [Capture Traffic] を選択することで、通信ログの採取が開始されます。(画面左下に “Capturing” と表示されましたら、採取中の状態です)
あとは、IE を起動して事象を再現させることで、事象発生時の通信ログを採取することが可能です。なお、事象を再現したあとは、再度 [File] – [Capture Traffic] を選択し、採取を停止してください。
下記のスクリーン ショットは、IE11 から Bing へアクセスした際の HTTP 通信ログです。左ペインで詳細を見たい通信を選択することで、右ペインに詳細が表示されます。
スクリーン ショットは、実際の HTTP 通信の中身を表示したものであり、赤で囲った部分が HTTP リクエスト、緑で囲った部分が HTTP レスポンスです。リクエスト/レスポンスを同時に確認できるのも、Fiddler の便利なところです。
上記の方法で取得したログは、[File] – [Save] から保存することができます。保存をする場合は、[All Sessions] や [Selected Sessions] など、通信を指定して保存することが可能です。
なお、詳細は後述いたしますが、保存したログを使用することで、通信内容を復元することができます。
2. HTTP レスポンスを編集する
HTTP レスポンスとは、Web ブラウザからの HTTP リクエストに対する、Web サーバーからの応答です。HTTP レスポンスには、以下のような情報が含まれています。
・HTTP 応答ヘッダー (HTTP ステータス コードや Cookie、Content-Type などが含まれています)
・コンテンツ ボディー (IE 内に表示される HTML ファイルです)
Fiddler を使用することで、HTTP 応答ヘッダーや実際の HTML コンテンツを編集することができます。では、スクリーン ショットを見ながら実際に Bing へアクセスする際の HTTP レスポンスを編集してみましょう。
2-0. 事前準備
メニュー バーから、[Rules] – [Automatic Breakpoints] – [After Responses] を選択します。この設定を行うと、画面左したに以下のようなマークが表示されます。これで準備は完了です。
2-1. HTTP 応答ヘッダーを編集する
HTTP 応答ヘッダーを編集してみます。まずは、上記の設定がされた状態で、Web ページへアクセスしてみます。その結果、IE が HTTP レスポンスを受信する前に、一旦通信がストップします。(IE の画面は白いまま止まります)
下記の画面のようになるので、あとは左ペインから HTTP 応答ヘッダーを編集したい通信を選択し、右ペインで編集を行います。
今回は、”Content-Type” の値を編集してみましょう。具体的な手順は以下の通りです。
1) 上記スクリーン ショットにて、赤枠で囲った [Inspectors] を選択し、その下のタブから [Headers] を選択します。(今回はレスポンスを編集するため、下側のウィンドウで操作をします)
2) ヘッダー一覧の中から、“Content-Type: text/html; charset=utf-8” を選択して右クリックし、[Edit Header] を選択します。
3) [Header Editor] ダイアログが表示されますので、"Value" の値を任意の値に書き換え、[Save] を押下します。
4) 上記スクリーン ショットの緑のボタン ([Run to Completion]) をクリックします。
同様の手順で Cache や Cookie も編集できるため、この機能を使用して様々な検証を行っています。
2-2. コンテンツ ボディーを編集する
上記と同様の手順で、HTML ファイルそのものを編集することもできます。HTML ファイルを編集する場合は、[Inspectors] を選択した後に、[Raw] のタブを選択します。[Raw] タブを選択すると、HTTP レスポンスが表示されます。その内容は直接編集することができますので、その内容を書き換えることで Web ページの内容そのものを編集できます。
例えば、Bing へアクセスした際の HTML タグの内容をすべて削除すると、白紙の Web ページが表示されます。
3. ログを使用して事象を復元する
レスポンスの内容を編集するだけでなく、実際の通信ログのみから、現象を再現することも可能です。
この機能のすごいところは、Web サーバーなどの環境が一切必要ないことです。HTTP の通信ログのみから現象を再現できるため、例えば再現コンテンツの作成ができない、特定の環境でしか発生しない事象でも、事象発生時の Fiddler ログがあれば、再現確認/調査が可能となります。
今回は、Bing へアクセスする際の動作を実際にログから再現してみましょう。事前準備として、Bing にアクセスした際の Fiddler ログを保存し、それをダブル クリックで開いてください。
Fiddler ログを開いたあとは、以下の手順で事象を再現することができます。
1) IE を起動し、[インターネット オプション] – [接続] タブから、以下のプロキシを設定します。なお、Fiddler を起動すると自動でプロキシの設定が行われる場合もございますので、その場合設定は不要です。また、Fiddler を終了した際は、プロキシが元の設定に戻っているかをご確認ください。
アドレス：localhost
ポート：81
2) 右ペインから、[AutoResponder] タブを選択します。
3) 左ペインに記録されている通信ログをすべて選択し、右ペインにドラッグ & ドロップします。
4) [File] – [Capture Traffic] を設定し、画面左下が “Capturing” となっていることを確認します。
5) 右ペインから、再現したい通信を選択して右クリックし、[Open URL] を選択します。今回は、Bing にアクセスする際の動作を再現したいので、一番上の “http://www.bing.com” を選択して、右クリックします。
6) [Open URL] を選択すると、IE が起動し、Bing のページが表示されます。
今回のブログは以上となります。
繰り返しとなりますが、Fiddler のすごいところは Web サーバーなどの再現環境がない場合でも事象が再現でき、かつその通信内容を編集することができる点です。
みなさまもぜひ Fiddler を使いこなして、Web ページに繋がらないなどの事象に対するトラブルシュートをしてみてください！