DEV

HTTP(S)通信のキャプチャツールFiddlerの使い方を一から説明します

7月 2, 2021

violin

Webアプリの開発中に、フロントエンドからサーバに投げているリクエストの中身やサーバからフロントエンドに返るレスポンスの中身を確認したい時があります。

Fiddlerというツールを使用すると、HTTP(S)リクエスト・HTTP(S)レスポンスを手軽に確認できます。Fiddlerには、英語でバイオリニストという意味があります(そのためトップ画はバイオリン)。

本記事では、Fiddlerのインストール方法、セットアップと使い方を説明します。想定している使用環境は、以下の通りです:

  • OS:Windows 10 64bit
  • ブラウザ:Chrome
  • Fiddlerの種類:Fiddler Classic
  • Fiddlerバージョン:v5.0.20204.45441 for .NET 4.6.1 Built: 2020年11月3日

Fiddlerは、Eric Lawrence氏による開発・公開から15年以上経過していますが、活発に機能追加が行われています。Fiddlerに対する機能要望は、こちらからできます。Fiddlerの次のリリースは、2021年12月の予定です。

各機能をより詳細に説明した記事も用意しています。知りたい機能がはっきりしている場合は、以下から各機能の詳細説明ページへ移動できます。

【Fiddler関連記事一覧】

Fiddlerとは

Fiddlerとは、HTTP(S)通信に特化したプロキシサーバです。ネットワークキャプチャツールや Web アプリケーションデバッグ用ツールといったりもします。HTTP(S)通信を変更、調査、ログするためのもので、Webアプリの開発やデバッグには欠かせません。

これまでは、Windows用のみ提供されていましたが、2020年より、Mac用の提供も開始しています。

同じ様なネットワークキャプチャツールとして、WireSharkという製品もありますが、こちらは、HTTP(S)以外の通信もキャプチャできる反面、情報量が多すぎて、開発やデバッグには使いづらい印象があります。

Fiddlerのダウンロード

Fiddlerは、ダウンロードサイトからダウンロードできます。

画面上の「Download Now」ボタンを選択します。

Telerik Fiddler Classic Download Now画面

Fiddlerの使用目的、連絡先のeメールアドレス、滞在国を入力し、下のチェックボックス二個にチェックを入れて、「Download for Windows」ボタンを選択すると、「FiddlerSetup.exe」のダウンロードが始まります。

1. Telerik Fiddler Classic Download for Windows画面
2. Telerik Fiddler Classicダウンロード中画面

Fiddlerのインストール

インストーラ「FiddlerSetup.exe」をダブルクリックします。

  1. 「Telerik Fiddler License Agreementダイアログ」で、一部文字化けしている(笑)ライセンス条項を一読し、「I Agree」ボタンを選択します。
  2. 「Telerik Fiddlerインストール先指定ダイアログ」で、Fiddlerのインストール先を指定し、「Install」ボタンを選択します。
    インストールが始まります。
  3. インストールが完了すると、ダイアログの最後に「Completed」と表示されます。「Close」ボタンを選択して、終了します。
1.Telerik Fiddler License Agreementダイアログ
2.Telerik Fiddlerインストール先指定ダイアログ
3. Completedダイアログ

Fiddlerのインストール後の初期セットアップ

Fiddlerのインストール後、初期セットアップとして以下2つを実施します:

  1. ブラウザのプロキシ情報の保存
  2. HTTPS通信のキャプチャ設定
  3. テキストエディタの設定

それぞれを順に説明します。

ブラウザのプロキシ情報の保存

Fiddlerを起動すると、ブラウザのプロキシ情報(IPアドレスとポート)をFiddler用のものに修正します。Fiddlerを操作中に異常終了すると、プロキシ情報にFiddler用のIPアドレスとポートが残り、それまで設定していた情報が消える場合があります。

この様な状態を避けるため、Fiddler起動前に、元のプロキシ情報をメモしておきます。現在のプロキシ情報を確認する方法を以下に示します。

Windowsキー+「X」キーを押下し、「ファイル名を指定して実行」を選択します。

Windowsキー + 「X」キーで表示される「システムメニュー」

「ファイル名を指定して実行」ダイアログが表示されるので、「control inetcpl.cpl」と入力し、「OK」ボタンを選択します。

「ファイル名を指定して実行」ダイアログ

「インターネットのプロパティ」ダイアログ上の「接続」タブ→「LANの設定」ボタンを選択します。

「インターネットのプロパティ」ダイアログ

「ローカル エリア ネットワーク(LAN)の設定」ダイアログ上の「LANにプロキシ サーバーを使用する」チェックボックスにチェックが入っている場合は、アドレスとポートをメモします。また、「詳細設定」ボタンを押して、「プロキシの設定」ダイアログの画面上にあるIPアドレスとポートなどもメモします。

「ローカル エリア ネットワーク(LAN)の設定」 ダイアログ
「プロキシの設定」ダイアログ

万が一、Fiddlerが異常終了して、Fiddlerのプロキシ情報が残ってしまった場合は、メモした情報を基に設定を戻せば、インターネットへ接続できる様になります。

HTTPS通信のキャプチャ設定

Fiddlerをインストールした直後の状態では、HTTPS通信は解析できません。FiddlerにHTTPS通信を解析できる様にするための設定を以下に示します:

WindowsのスタートからFiddlerを起動します。

Windows 10のスタートメニュー

Fiddlerを初めて起動すると、以下の様なダイアログが表示されます。「キャンセル」ボタンを押せば、次回から表示されなくなります。

Fiddler起動時の警告画面

トラフィックのキャプチャは起動直後に始まります。ブラウザを立ち上げている場合、画面左にHTTP・HTTPSのトラフィック情報が表示されます。

Fiddler起動画面

Fiddler画面左上の「Tools」→「Options...」を選択して、「Options」ダイアログを表示します。

Fiddlerメニュー

「Options」ダイアログの「HTTPS」タブを選択します。
「Capture HTTPS CONNECTs」、「Decrypt HTTPS traffic」、「Ignore server certification errors (unsafe)」の3つにチェックを入れます。

「Options」ダイアログの「HTTPS」タブ

画面右の「Actions」ボタンを選択します。一番上の「Trust Root Certificate」を選択します。

「Actions」ボタンを選択後のメニュー

Fiddler用Root証明書をインストールするダイアログが表示されます。「Yes」ボタンを選択します。

Fiddler用Root証明書のインストール確認用ダイアログ

本当にFiddler用Root証明書をインストールするかの確認ダイアログが表示されます。「はい」ボタンを選択します。

Fiddler用Root証明書のインストール確認メッセージ

Windowsのユーザアカウント制御(UAC)が表示されます。「はい」ボタンを選択します。

ユーザアカウント制御

Fiddler用Root証明書がインストールされた、とのアラートが表示されます。

Fiddler用Root証明書インストール結果

上記で、FiddlerがHTTPS通信の解析を行うことができる様になります。

テキストエディタの設定

Fiddlerでは、好みのテキストエディタでHTTPリクエストやHTTPレスポンスのBODYデータを表示できます。デフォルトでは、Windows標準のメモ帳になっているため、好みのテキストエディタに変更しておくと、作業効率がアップします。設定方法を以下に示します:

Fiddler画面左上の「Tools」→「Options...」を選択して、「Options」ダイアログを表示します。

Fiddlerメニュー

「Options」ダイアログの「Tools」タブを選択します。「Text Editor」に好みのテキストエディタのパスを指定します。以下の例では、Visual Studio Codeを設定しています。設定後「OK」ボタンを選択します。

「Options」ダイアログの「Tools」タブ

Fiddler上でHTTPリクエストを選択の「TextView」を選択し、「View in Notepad」を選択します。Visual Studio Codeで、TextViewの内容が表示されます。

これで、Fiddlerの初期設定は完了です。

Fiddlerの使い方

ここでは、Fiddlerの使い方を説明します。

Fiddlerの画面の見方

Fiddlerの画面は、以下画面の緑枠、青枠、赤枠の大きく3つに分けることができます。それぞれの概要は以下の通りです:

  • 緑:キャプチャしたHTTP(S)リクエスト一覧
  • 青:HTTP(S)リクエストの詳細(HTTPヘッダ情報、ボディ情報など)
  • 赤:HTTP(S)レスポンスの詳細(HTTPヘッダ情報、ボディ情報など)

赤枠の中にある「Response body is encoded. Click to decode.」は、HTTPレスポンスをエンコードしている(人間では読めない文字となっている)ことを示しています。黄色枠を選択してください(以降は自動でデコードして、読める様になります)。

Fiddlerメイン画面

HTTP(S)通信のキャプチャ方法

Fiddlerを起動すると、HTTP(S)通信のキャプチャを開始します。

手動でも、HTTP(S)通信のキャプチャの開始と停止ができますので、その方法を以下に示します:

メニューからキャプチャの開始・停止

「File」メニュー→「Capture Traffic」の選択で、キャプチャを開始・停止できます。「Capture Traffic」の右にチェックがあればキャプチャ中、チェックがなければキャプチャしていません。

メニューにある通り、F12キーを押すことでも、キャプチャを開始・終了できます。

キャプチャしていない状態
キャプチャしている状態

ステータスバーの右下からキャプチャの開始・停止

Fiddler画面のステータスバーの右下に、キャプチャ中(Capturing)か、停止している(何も表示されない)かが分かる様になっています。このステータス(以下赤枠)を選択することで、キャプチャを開始・停止することができます。

キャプチャしていない状態
キャプチャしている状態

キャプチャしたHTTP(S)通信の詳細確認(Inspectors機能)

キャプチャしたHTTP(S)通信の詳細は、Inspectors機能で確認できます。具体的には、画面左のキャプチャしたHTTP(S)リクエスト一覧より、HTTP(S)リクエストを選択します。その後、画面右上のHTTP(S)リクエストの詳細にある「Inspectors」タブを選択します。

「Inspectors」タブでは、整形されたHTTP リクエストヘッダ・レスポンスヘッダが確認できたり、生電文(Raw)を確認することができます。以下の図では、HTTPリクエストのヘッダとHTTPレスポンスの生電文を表示しています。

HTTPリクエストのヘッダとHTTPレスポンスの生電文

HTTP(S)リクエストの手動作成(Composer機能)

Fiddlerには、HTTP(S)リクエストを手動で作成する機能(Composer機能)があります。作成するには、以下の2通りの方法があります:

  • HTTP(S)リクエストを一から作成
  • キャプチャ済のHTTP(S)通信を修正

HTTP(S)リクエストを一から作成

一から作成する場合は、Fiddlerを起動して、「Composer」タブを選択して、HTTP(S)リクエストを入力→実行(サーバへ送信)します。

具体的には、以下の手順で作成します(画像にも手順を記載しています):

  1. 「Composer」タブを選択
  2. HTTPメソッド、URL、HTTPのバージョンを入力
    プルダウンでも入力できます。
  3. HTTPヘッダに入れる情報を入力
  4. HTTPリクエストボディに入れる情報を入力
  5. 「Execute」ボタンを選択
    作成したHTTP(S)リクエストを対象のURLに送信します。
HTTP(S)リクエストを手動で作成する方法

キャプチャ済のHTTP(S)通信を修正

キャプチャ済のHTTP(S)通信を修正して、HTTP(S)リクエストを作成する場合は、左側のキャプチャしたHTTP(S)リクエスト一覧から、使いたいものを選択し、Composerタブ内にドラッグします。

該当のHTTP(S)リクエスト情報が入力されるので、必要な箇所を修正し、Executeボタンを押下して、実行(サーバへ送信)します。

キャプチャ済のHTTP(S)通信を使用して、同じHTTP(S)リクエストを送信

キャプチャ済のHTTP(S)通信をそのまま再度サーバに送りたい場合は、Replayボタンを押します。

「Replay」ボタンだけを選択すると、1回、Shiftキーを押しながら「Replay」ボタンを選択すると、任意の回数HTTP(S)リクエストを送信できます。

「Shift」キーを押しながら「Replay」ボタンを押すと、リクエスト発行数を指定するダイアログを表示

以下は、「Replay」を10回実行する様に指定した結果です。該当URLは、僕が運営する別サイトです。他の方が運営するサイトで試すと、サーバに余計な負荷を与えることになるため、やめましょう(笑)。

「Shift」キーを押しながら「Replay」ボタンを押して、「10」と入力した結果

自動応答(AutoResponder機能)

Fiddlerには、特定の条件に合致するHTTP(S)リクエストに対して、Fiddlerが応答を返す機能があります。サーバにはリクエストは送信されません。この機能を使用すれば、Webアプリのテスト時に、サーバ側を変更せずに必要なレスポンスを作ることが可能です。

具体的には、以下の手順で作成します(画像にも手順を記載しています):

  1. 「AutoResponder」タブを選択
  2. 「Enables Rules」チェックボックスを選択
    「Enables Rules」チェックボックスにチェックが入っている間、Fiddlerの自動応答機能が有効になります。
  3. 「Add Rule」ボタンで、自動応答するルール(条件)を追加します。
  4. 「Rule Editor」で自動応答するルール(条件)の詳細を設定します。
    最初のプルダウンには、合致するHTTP(S)リクエストを設定します。
    2つ目のプルダウンでは、応答内容の詳細を設定します。応答内容は、インストールディレクトリの「ResponseTemplates」ディレクトリ内に保存されています。
    以下画像では、「https://www.createindex.app/」に合致する場合、「200_SimpleHTML.dat」を応答するルールとなっています。
  5. 「Save」ボタンで、「Rule Editor」の内容を保存します。
    保存した結果は、画面下部の一覧に表示されます。
AutoResponder機能を使用して自動応答を設定する方法

実際にブラウザで、上記のRule EditorにあるURL(https://www.createindex.app/)を実行すると、以下の様な画面を表示します:

200_SimpleHTML.datで応答した場合のブラウザ表示結果

特定のURLやブラウザでの通信のみを表示する(Filters機能)

Fiddlerには、特定のURLや特定のブラウザの通信のみを表示する機能があります。この機能を使用すれば複数ブラウザで、色々なページを参照・テストしていても、意図したURLやWebページのみをキャプチャできます。Filters機能は、選択項目が多いため、画面を分割して説明します:

  • Use Filtersチェックボックス
    チェックを入れると画面に表示しているフィルタ情報を使用
  • Actionsボタン
    ・Run Filterset now:画面に表示しているフィルタ情報を実行。Filters機能の設定を一部変更した場合は、これを再度選択しないと、Fiddlerには新しい設定が反映されない
    ・Load Filterset...:保存しているフィルタ情報を読込
    ・Save Filterset...:画面に表示しているフィルタ情報を保存
  • Hosts
    ・キャプチャするゾーン(No Zone Filterを選択すればOK)
    ・キャプチャするホスト(Show only the following Hostsを選択する)
    ・キャプチャするホスト名を「;」区切りで並べる
Filters画面上部
  • Client Process
    クライアントプロセス(特定のブラウザなど)のHTTP(S)リクエスト・レスポンスをキャプチャ
  • Request Headers
    リクエストヘッダに特定の情報があるもののみをキャプチャ
Filters画面中部1(Client Process, Request Headers)
  • Breakpoints
    ブレークポイントを貼り、条件に合致した場合、HTTP(S)リクエスト・レスポンスを修正できる
  • Response Status Code
    該当するレスポンスコードをキャプチャ一覧から削除。例えば、「Hide success (2xx)」のチェックボックスにチェックを入れると、HTTPレスポンスコードが200台のものは、キャプチャ一覧から削除する。
Filters画面中部2(Breakpoints, Response Status Code)
  • Response Type and Size
    特定のHTTP(S) レスポンスのみをキャプチャする設定。例えば、「Block image files」にチェックボックスを入れると、本ページは、以下の様に、画像が非表示の状態となる:
Response Type and Sizeの「Block image files」チェックボックスにチェックを入れた場合の画面
  • Response Headers
    クッキーを設定したり(Flag responses that set cookies)、特定のヘッダ情報を含んでいる(Flag responses with headers)キャプチャ情報を太字で表示します。以下は、Flag responses with headersに「Server」と入力した場合のキャプチャ一覧です(#71が入力前にキャプチャ、#74が入力後にキャプチャ。#74は、太字になっているのが分かる):
Flag responses with headersに「Server」と入力した場合のキャプチャ一覧
Filters画面下部(Response Type and Size, Response Headers)

FiddlerScriptの使い方

FiddlerScriptは、HTTP(S)リクエスト・レスポンスをプログラム的に修正できる様にしたツールです。FiddlerのUI(ユーザインターフェイス)も実装できます。

FiddlerScriptは、JScript.NET(JavaScriptの.NET版)かC#で実装できる様になっています。デフォルトでは、JScript.NETが選択されています。

Fiddler Scriptのプログラミング言語の設定

Fiddler画面左上の「Tools」→「Options...」を選択して、「Options」ダイアログを表示します。「Scripting」タブを選択し、「Language」プルダウンで「Jscript.NET」か「C#」を選択し、「OK」ボタンを押します。今回は、JScript.NETで進めます。

FiddlerScript設定画面

FiddlerScriptの起動方法

FiddlerScriptを起動するには、以下の2通りの方法があります:

  • FiddlerScript Editorを使用する方法(こちらがおすすめ)
  • Fiddler画面内のFiddlerScriptタブを使用する方法

FiddlerScript Editorを使用する方法(こちらがおすすめ)

メニュー→「Rules」→「Customize Rules…」を選択するか、Fiddler上で「Ctrl」キー+「R」キーを入力すると、FildderScript Editorが開きます。FiddlerScript Editorの方が、ショートカットキーなどが使えるため、スクリプトの編集が簡単にできます。FiddlerScript Editorの使用をおすすめします。

FiddlerScript Editor画面

FiddlerScript Editorを開くと、CustomRules.jsファイルが開きます。このファイルの上部に、FiddlerScript Editorをインストールする様にとコメント書きがありますが、最近では、FiddlerScript Editorが同梱されているため、別でインストールする必要はありません。

FiddlerScript EditorでCustomRules.jsを編集→保存すると、音が再生され、Fiddlerの画面最下部のステータスバーに英語で「CustomRules.js was loaded at '日時'」と出力されます。

Fiddler画面内のFiddlerScriptタブを使用する方法

FiddlerScript Editorを呼び出さなくても、以下の画面の様に、Fiddler画面内のFiddlerScriptタブで同じスクリプトを表示・編集できます。しかし、保存するためには、必ず「Save Script」ボタンを押さないといけなかったり、保存するとCustomRules.js内の一番上にカーソルが移動するなど、あまり使い勝手はよくありません。

Fiddler画面内のFiddlerScriptタブ

FiddlerScriptで使用する主なメソッド一覧

FiddlerScriptを開くと、Handlersクラスを実装したものが表示されます(CustomRules.js)。Handlersクラスには、大きく分けると3種類のメソッド群があります:

  • アプリケーションイベント関連のメソッド
    Fiddler自身が起動・終了等の変化がある際に実行
  • セッションイベント関連のメソッド
    1トラフィック(HTTP(S)リクエスト・レスポンス)毎に実行。キャプチャしたHTTP(S)リクエスト一覧の1行分のイベントです
  • OnExecActionメソッド
    「QuickExec」ボックスに入力されたコマンドを実行

アプリケーションイベント関連のメソッド

アプリケーションイベント関連のメソッドを以下に記載します:

メソッド名説明
static function
OnBoot
Fiddlerの起動が完了した後実行するメソッド
static function
OnShutdown
Fiddlerが終了中に実行するメソッド
static function
OnAttach
Fiddlerをシステムプロキシとして登録する際に実行するメソッド
static function
OnDetach
Fiddlerをシステムプロキシから解除する際に実行するメソッド
static function
Main
FiddlerScriptの保存、ロード、コンパイル時に実行するメソッド。
FiddlerScriptを保存した際、「CustomRules.js was loaded at '日時'」と表示する処理は、Mainメソッド内に記述されています
アプリケーションイベント関連のメソッド一覧

セッションイベント関連のメソッド

セッションイベント関連のメソッドは、HTTP(S)リクエストヘッダ・ボディの読込、サーバからのHTTP(S)レスポンスヘッダ・ボディの読込までの各タイミングで、必要な処理を実行できる様になっています。

具体的には、以下4メソッドに分かれています。1回のセッションで、上から順にすべて実行します:

メソッド名説明
static function
OnPeekAtRequestHeaders
HTTP(S)リクエストヘッダを読み込んだ後、呼び出されます
static function
OnBeforeRequest
HTTP(S)リクエストヘッダ・ボディを読み込んだ後、呼び出されます。リクエストヘッダやボディの情報を修正したい場合は、ここに処理を記述します
static function
OnPeekAtResponseHeaders
サーバにHTTP(S)リクエスト情報を送信後呼び出されます。HTTP(S)レスポンスヘッダは読み込まれている状態です。レスポンスボディは読み込まれていません
static function
OnBeforeResponse
Youtubeの様なストリーミング以外は、HTTP(S)レスポンスがクライアント(ブラウザ等)に返る前に呼び出されます。レスポンスヘッダやボディの情報を修正したい場合は、ここに処理を記述します
セッションイベント関連のメソッド一覧

上記に加え、以下が呼び出される場合もあります:

メソッド名説明
static function
OnReturningError
Fiddlerがクライアントに(サーバに接続できない等の)エラーメッセージを返す場合に呼び出されます
static function
OnWebSocketMessage
WebSocketによるリクエスト送信・レスポンス受信時に呼び出されます
呼び出される可能性があるメソッド一覧

OnExecActionメソッド

Fiddlerには、「QuickExec」ボックスという入力ボックスが存在します。ここにコマンドを入力すると、OnExecActionメソッドが実行され、メソッド内にあるコマンドを実行します。

static function OnExecAction(sParams: String[])

OnExecActionメソッドは、「QuickExec」ボックスに独自コマンドを処理する場合に実装します。以下に、「QuickExec」ボックス(左下の黒い部分)とFiddlerScript上のOnExecActionメソッドの一部を示します:

QuickExecボックス(左下の黒枠)とFiddlerScript上のOnExecActionメソッド

QuickExecメソッド内は、switch文で実装されているため、独自のコマンドを実装する場合は、case句を追加し、実装します。case句の最後には、trueを応答する様にしてください。

使えるコード例

CustomRules.js内にはサンプルコードが色々とあるので、それを読めば、どういうことができるかわかると思います。ここでは、よく使うものを紹介します:

特定のURLに対して処理を実行する
//特定のURL(例ではkennyshroffを含むURI)に対して処理をする場合
if ( oSession.uriContains("kennyshroff") ) {
  /* kennyshroffがURIに含まれる場合の処理を記述 */
}
HTTP POST時に特定の処理を実行する
if ( oSession.HTTPMethodIs("POST") ) {
  /* HTTP POSTメソッド によるリクエスト送信時の処理を記述 */
}
コードが実行されているか確認する方法(デバッグ用)
FiddlerObject.StatusText = " 現在の日時: " + (new Date()); //ステータスバーに現在の日時を表示
MessageBox.Show(" 現在の日時: " + (new Date()),"MessageBoxタイトル"); //MessageBoxを表示

以上、Fiddlerの使い方でした。

Fiddlerというデバッグツールを使用して、少しでも、Webアプリの開発が楽になればと思います。

Webアプリの開発で挫折する多くの人は、「基盤となる技術」を理解していないケースが多いと感じます。以外に思うかもしれませんが、基盤の技術は、昔から大きく変わらず、習得にも時間がかかりません。「Webを支える技術」は、10年以上前に出版された本ですが、分かりやすく基盤の技術を説明してくれている良書です。復習用、見直し用にもおすすめの一冊です。

各機能をより詳細に説明した記事も用意しています。以下から各機能の詳細説明ページへ移動できます。

【Fiddler関連記事一覧】

-DEV