ウェブアプリケーションのバグ調査にウェブトラフィックのキャプチャが有効な場合があります。今回はFiddlerCapでウェブトラフィックのキャプチャを行い、Fiddlerで解析を行う方法を紹介します。
シナリオ環境
以下のようなクライアントサーバー環境を考えます。
今回用いるASP.NETアプリ
クライアント側からクライアントの時間(xx時yy分のxxの部分)を送信して、サーバー側でその時間が午前か午後かを判断するサンプルASP.NETアプリを利用します。
ASP.NETの午前か午後かを判断するコードは以下です。
if (hour > 0 && hour < 12) output1.Text = "午前です";
if (hour >= 12 && hour < 24) output1.Text = "午後です";
[FiddlerCap使用方法]
クライアント側でFiddlerCapを使用して、ウェブトラフィックをキャプチャします。
1. http://www.fiddlercap.com/dl/FiddlerCapSetup.exe からFiddlerCapをダウンロードします。
2. ブラウザをすべて閉じます。
3. FiddlerCapをインストールします。インストールはインストール先を指定するだけととても単純では1分もかかりません。
4. インストールが終わるとFiddlerCapが自動的に起動します。
以下は起動直後の画面です。
5. 必要に応じ、"Cookiesをクリア"・"キャッシュをクリ"をクリックします。
6. "キャプチャ開始"をクリックします。
7. キャプチャするために必要なFiddlerCapのファイアウォールの例外を作成するため、以下のダイアログが出たら、アクセスを許可するをクリックしてください。
8. ブラウザが自動的に立ち上がり、以下のようなページが表示されます。その後問題のサイトに移動し、バグを再現させます。
9. 問題の再現が終わったら、キャプチャの停止をクリックします。
10. Snapshotをクリックすると、暗いあんっとん画面の全体をキャプチャしトレースファイルに含めることができます。(キャプチャした画面のスクリーンショットは後述します。)
11. "キャプチャ保存"をクリックし、キャプチャを保存します。
保存後以下のダイアログが表示されます。
12. 保存したファイルを開発者に送ります。
補足:
FiddlerCapの画面で"詳細"をクリックすると、トレースの詳細を確認できます。
[Fiddlerでキャプチャの解析]
クライアントで取得したキャプチャを解析します。
1. Fiddlerを起動して、File-> Load Archiveをクリックし、送られてきたファイル(sazファイル)をオープンします。
2. 左側にWeb Sessionのやり取り、右側に詳細な情報を確認できます。
今回のASP.NETの部分のキャプチャは以下の反転したところです。
(最初の3つは上記の[FiddlerCap使用方法]の8で自動的にブラウザが起動した際のキャプチャです)
3. 今回の問題はOutput.aspxにアクセスしたときにおこったものです。したがってURLがOutput.aspxのものをダブルクリックします。
すると以下のような画面になり、WebFormsタブでどのような値が送られたかを確認できます。今回はValueが0であることが確認できます。よって、クライアントからは0が送られてきたことがわかります。
この情報をもとにソースを調べるとイコールをつけそこなったことに気付くことができます。
4. 番下のjpgが上記の[FiddlerCap使用方法]の10でキャプチャしたデスクトップ画面です。
補足
・FiddlerCapではなくFiddlerを用いてもウェブトラフィックのキャプチャーは行えます。ただ、FiddlerCapはキャプチャ専用のツールなので、GUIもよりユーザーフレンドリーで、アプリサイズも小さいです。
リンク
・Capturing web traffic logs
http://www.fiddlercap.com/FiddlerCap/
・FiddlerCap トレースを収集して Windows Live Hotmail サポート チームを支援する方法
http://support.microsoft.com/kb/929779/ja