「Fiddler ユーザーの集い」フォローアップ (2/2)


6 月 30 日 (2013) に「Fiddler ユーザーの集い」 で 登壇させていただきました「今日から使う Fiddler」というセッションのフォローアップの第二回目記事です。

Fiddler とはなにか? 入手先などについては、前回のこちらの記事の内容をご参照ください。

当日使用したスライドは以下になります。

 

今回は Web セッションの内容を調べるためのタブ付きビューの各タブについて紹介していきます。

 

 

トラフィックの確認

Fiddler でキャプチャした Web セッションの内容を確認するには、目的に合わせタブ付きビューの各タブを使用します。

タブ付きビューに既定で表示される各タブの内訳は以下のとおりです。

image

以降は各タブの役割について紹介していききます。

 

 

Statistics タブ

Statistics タブは Web セッションの基本情報を表示します。

クライアントの接続数であるとかバイト数であるとか、接続に関する情報が一覧となって表示されます。

image

 

画面下の Show Chart をクリックすると、選択されている Web セッションの容量を占めるヘッダーと本体の割合が円グラフで表示されます。

 

image

 

Filters タブ

Filters キャプチャした Web セッションを目的に合わせて抽出するのに使用します。

image

ホスト名の指定やゾーン (インターネット/イントラネット) 指定、リクエストコマンド、レスポンスされる MIME Type のの指定など、Web セッション (Request と Response のペア)を抽出するにおいて、 およそ考えられる数多くの条件指定が行えるようになっています。

フィルタの指定を行うには、Filter 中の Use Filter チェックボックスにチェックをつけ、タブ内の UI を入力可能状態にします。

image

設定したフィルタを実行するには、Filter タブの右上にある [Actions] ボタンをクリックし、表示されたメニューから [Run Filterset now] を選択します。

image

フィルタを解除するには、Use Filter チェックボックスのチェックをはずしますが、フィルタされてしまった Web セッションは表示されませんので、見えなくなった Web セッションを調べるには再度キャプチャする必要があります。

 

 

Timeline タブ

Timeline タブでは、1 から 250 個までの選択された Web セッションをウォーターフォールダイアグラムで表示します。

一連の処理にかかった時間の割合のほかセッション同士の相互分析にも使用できます。

image

タブ内で右クリックし、[Mode] メニューのドロップダウンリストボックスで Mode を指定することによりウォーターフォールダイアグラムの表示を切り替えることができます。

image

モードの内訳は以下の通りです。

メニュー 機能
Timeline セッションの開始から終了まで
Client Pipe MAp クライアントから Fiddler までのインバウンド接続
Server Pipe MAp サーバーから Fiddler までのアウトバウンド接続

チャートに表示される凡例などの説明、および Timeline タブの詳細については、「実践 Fiddler」 の P.39 を参照してください。

また、Internet Explorer 9 以降の F12 開発者ツールのネットワークキャプチャ機能でも、リクエストからレスポンス到達までの各タイミングを見ることができるので、こちらも合わせて使用すると良いでしょう。

 

 

Auto Responder タブ

Auto Responder タブでは Web クライアントのリクエストに対するルールを設定することができます。条件を設定し、レスポンスの改ざんなども行えます。

例えば、以下の画像では、Web クライアントが slide_1.png をリクエストした際には、レスポンスを改ざんし、ローカルにある SigAir.png を返すようにしています。

このように指定すると Web ブラウザに表示されるページ中で、本来 slide_1.png が表示される箇所にはすべて SigAir.png の画像が表示されます。

 

image

 

この例では画像ファイルで説明しましたが、この機能を利用すると 、たとえばJavaScript のライブラリをサーバーサイドでわざわざ置き換えることなく、異なるパーションと切り替えてテストすることができます。

たとえば、ある Web ブラウザで jQuery を使用したページが動作しない場合、この機能を使用して最新のバージョンの jQuery ライブリでどうか、テストすることができます。

条件に合致した際の動作を行う際にはタブ上部にある Enable aotomatic response チェックボックスにチェックをつけ、条件に合致しなかった際の動作を行う際には、Unmatched requests passthrough チェックボックスにチェックをつけます。

Enable Latency チェックボックスにチェックをつけると、ルールの実行まで何秒遅らせるか、時間の指定が行えます。

なお、Auto Reaponder タブの条件設定は、正規表現を使用したかなり細かい条件設定も可能です。

Auto Reaponder タブのより詳細な使い方については、「実践 Fiddler」 の P.42 をご参照ください。

 

 

Composer タブ

Composer タブでは、サーバーに対するリクエストを作成して発行することができます。

リクエストの内容をテキストベースで手動で記述できるほか、Web セッション リストから任意のセッションをドラッグしてリクエストの内容をコピーし、それを編集して送信することもできます。

image

 

 

Inspectors タブ

Inspectors タブは、Web セッションの内容を確認するのにおそらくもっとも使用されるタブです。

タブ内は上下に分割されており、上部は Web クライアントからのリクエスト、下部はサーバーからのレスポンスの内容が表示されます。

 

image

また、リクエスト、レスポンスを表示する画面それぞれに、Web セッション内のデータに合わせたビューが用意されており、それぞれのタブを切り替えて使用します。

 

image

 

以降、Inspector タブの種類を簡単に紹介します。

 

Headers タブ

Header タブでは、リクエストヘッダー/レスポンスヘッダー を表示します。

image

 

TextView タブ

TextvIew リクエスト/レスポンス本体をテキストで表示します。

image

 

SyntaxView タブ

SyntaxView タブでは、リクエスト/レスポンス本体の HTML、CSS、JavaScript の要素を色付きで強調表示します。

image

 

Raw タブ

Raw タブでは、リクエスト\レスポンス のヘッダーをと本体をテキストで表示します。

 

image

 

HexView タブ

HexView タブでは、リクエスト/レスポンスのヘッダーと本体を 16 進で表示します。バイナリデータを確認するのに向いています。

image

 

WebForms タブ (リクエストのみ)

WebForm タブでは、HTML フォームの名前と値のペアを表示します。Web クライアントからフォームを使用してサーバーに送信されるデータを確認することができます。

 

image

 

Auth タブ

Auth タブでは、リクエストとレスポンスの権限、認証関連のヘッダーの内容を表示します。

image

 

Cookies タブ

Cookies タブでは、リクエストとレスポンスの Cookie 情報を表示します。

image

ImageView タブ (レスポンス のみ)

ImageView タブでは、レスポンスに含まれる画像を表示します。

image

 

 

JSON タブ

JSON タブでは、リクエストとレスポンスに含まれる JSON データをツリービューで表示します。

image

 

XML タブ

XML タブでは、リクエストとレスポンスに含まれる XML データをツリービューで表示します。

image

Transformer タブ (レスポンスのみ)

Transformer タブでは、レスポンスへの HTTP ベースエンコーディングを追加、削除することができます。

image

 

 

今回はタブ付きビュー内の各タブについて紹介しました。

なお、タブ付きビューの各タブのより詳細な情報については「実践 Fiddler」 の P.33 以降をご覧ください。

また、Inspectors タブ内の各タブの詳細につきましては、同書の P.113 からをご覧ください。

続けて Firefox のネットワーク トラフィックのキャプチャ方法について書こうと思ったのですが、記事が長くなったので、次回投稿したいと思います。

 

 

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content