Webアプリの開発中に、フロントエンドからサーバに投げているリクエストの中身やサーバからフロントエンドに返るレスポンスの中身を確認したい時があります。
Fiddlerというツールを使用すると、HTTP(S)リクエスト・HTTP(S)レスポンスを手軽に確認できます。Fiddlerには、英語でバイオリニストという意味があります(そのためトップ画はバイオリン)。
本記事では、Fiddlerのインストール方法、セットアップと使い方を説明します。想定している使用環境は、以下の通りです：
- OS：Windows 11 64bit
- ブラウザ：Chrome
- Fiddlerの種類：Fiddler Classic
- Fiddlerバージョン：v5.0.20245.10105 for .NET 4.6.2 Built: 2024年10月26日 ※
※2025年1月16日現在、最新版
Fiddlerは、Eric Lawrence氏による開発・公開から15年以上経過していますが、活発に機能追加が行われています。Fiddlerに対する機能要望は、こちらからできます。Fiddlerは、現在メンテナンス中心となっており、最後に最新版がリリースされたのは2024年10月26日となっています(最近は、開発ベンダがFiddler Everywhereを押しているため)。
Fiddlerを使用していて、Windowsキーを押した時の反応が悪くなった方は、対応方法を「Fiddlerを使い続けるとWindowsのスタートメニューが遅くなる可能性がある」で説明していますのでご確認ください。
各機能をより詳細に説明した記事も用意しています。知りたい機能がはっきりしている場合は、以下から各機能の詳細説明ページへ移動できます。
通信ではなく、プロセス系の詳細情報を知りたい場合は、Process Explorer(プロセスエクスプローラー)を使用してください。Process Explorerの詳細は「Process Explorerの使い方を徹底解説 - ダウンロード・インストール・設定まで」をご確認ください。
Fiddlerとは
Fiddlerとは、HTTP(S)通信に特化したプロキシサーバです。ネットワークキャプチャツールや Web アプリケーションデバッグ用ツールといったりもします。HTTP(S)通信を変更、調査、ログするためのもので、Webアプリの開発やデバッグには欠かせません。
これまでは、Windows用のみ提供されていましたが、2020年より、Mac用の提供も開始しています。
同じ様なネットワークキャプチャツールとして、WireSharkという製品もありますが、こちらは、HTTP(S)以外の通信もキャプチャできる反面、情報量が多すぎて、開発やデバッグには使いづらい印象があります。
Fiddlerのダウンロード
Fiddlerは、ダウンロードサイトからダウンロードできます。
画面上の「Download Now」ボタンを選択します。
Fiddlerの使用目的、連絡先のeメールアドレス、滞在国を入力し、下のチェックボックス二個にチェックを入れて、「Download for Windows」ボタンを選択すると、「FiddlerSetup.exe」のダウンロードが始まります。
Fiddlerのインストール
インストーラ「FiddlerSetup.exe」をダブルクリックします。
- 「Telerik Fiddler License Agreementダイアログ」で、一部文字化けしている(笑)ライセンス条項を一読し、「I Agree」ボタンを選択します。
- 「Telerik Fiddlerインストール先指定ダイアログ」で、Fiddlerのインストール先を指定し、「Install」ボタンを選択します。
インストールが始まります。 - インストールが完了すると、ダイアログの最後に「Completed」と表示されます。「Close」ボタンを選択して、終了します。
Fiddlerのインストール後の初期セットアップ
Fiddlerのインストール後、初期セットアップとして以下2つを実施します：
- ブラウザのプロキシ情報の保存
- HTTPS通信のキャプチャ設定
- テキストエディタの設定
それぞれを順に説明します。
ブラウザのプロキシ情報の保存
Fiddlerを起動すると、ブラウザのプロキシ情報(IPアドレスとポート)をFiddler用のものに修正します。Fiddlerを操作中に異常終了すると、プロキシ情報にFiddler用のIPアドレスとポートが残り、それまで設定していた情報が消える場合があります。
この様な状態を避けるため、Fiddler起動前に、元のプロキシ情報をメモしておきます。現在のプロキシ情報を確認する方法を以下に示します。
Windowsキー+「X」キーを押下し、「ファイル名を指定して実行」を選択します。
「ファイル名を指定して実行」ダイアログが表示されるので、「control inetcpl.cpl」と入力し、「OK」ボタンを選択します。
「インターネットのプロパティ」ダイアログ上の「接続」タブ→「LANの設定」ボタンを選択します。
「ローカル エリア ネットワーク(LAN)の設定」ダイアログ上の「LANにプロキシ サーバーを使用する」チェックボックスにチェックが入っている場合は、アドレスとポートをメモします。また、「詳細設定」ボタンを押して、「プロキシの設定」ダイアログの画面上にあるIPアドレスとポートなどもメモします。
万が一、Fiddlerが異常終了して、Fiddlerのプロキシ情報が残ってしまった場合は、メモした情報を基に設定を戻せば、インターネットへ接続できる様になります。
HTTPS通信のキャプチャ設定
Fiddlerをインストールした直後の状態では、HTTPS通信は解析できません。FiddlerにHTTPS通信を解析できる様にするための設定を以下に示します：
WindowsのスタートからFiddlerを起動します。
Fiddlerを初めて起動すると、以下の様なダイアログが表示されます。「キャンセル」ボタンを押せば、次回から表示されなくなります。
トラフィックのキャプチャは起動直後に始まります。ブラウザを立ち上げている場合、画面左にHTTP・HTTPSのトラフィック情報が表示されます。
Fiddler画面左上の「Tools」→「Options...」を選択して、「Options」ダイアログを表示します。
「Options」ダイアログの「HTTPS」タブを選択します。
「Capture HTTPS CONNECTs」、「Decrypt HTTPS traffic」、「Ignore server certification errors (unsafe)」の3つにチェックを入れます。
画面右の「Actions」ボタンを選択します。一番上の「Trust Root Certificate」を選択します。
Fiddler用Root証明書をインストールするダイアログが表示されます。「Yes」ボタンを選択します。
本当にFiddler用Root証明書をインストールするかの確認ダイアログが表示されます。「はい」ボタンを選択します。
Windowsのユーザアカウント制御(UAC)が表示されます。「はい」ボタンを選択します。
Fiddler用Root証明書がインストールされた、とのアラートが表示されます。
上記で、FiddlerがHTTPS通信の解析を行うことができる様になります。
テキストエディタの設定
Fiddlerでは、好みのテキストエディタでHTTPリクエストやHTTPレスポンスのBODYデータを表示できます。デフォルトでは、Windows標準のメモ帳になっているため、好みのテキストエディタに変更しておくと、作業効率がアップします。設定方法を以下に示します：
Fiddler画面左上の「Tools」→「Options...」を選択して、「Options」ダイアログを表示します。
「Options」ダイアログの「Tools」タブを選択します。「Text Editor」に好みのテキストエディタのパスを指定します。以下の例では、Visual Studio Codeを設定しています。設定後「OK」ボタンを選択します。
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レスポンスをエンコードしている(人間では読めない文字となっている)ことを示しています。黄色枠を選択してください(以降は自動でデコードして、読める様になります)。
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(S)リクエストの手動作成(Composer機能)
Fiddlerには、HTTP(S)リクエストを手動で作成する機能(Composer機能)があります。作成するには、以下の2通りの方法があります：
- HTTP(S)リクエストを一から作成
- キャプチャ済のHTTP(S)通信を修正
HTTP(S)リクエストを一から作成
一から作成する場合は、Fiddlerを起動して、「Composer」タブを選択して、HTTP(S)リクエストを入力→実行(サーバへ送信)します。
具体的には、以下の手順で作成します(画像にも手順を記載しています)：
- 「Composer」タブを選択
- HTTPメソッド、URL、HTTPのバージョンを入力
プルダウンでも入力できます。 - HTTPヘッダに入れる情報を入力
- HTTPリクエストボディに入れる情報を入力
- 「Execute」ボタンを選択
作成したHTTP(S)リクエストを対象のURLに送信します。
キャプチャ済の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)リクエストを送信できます。
以下は、「Replay」を10回実行する様に指定した結果です。該当URLは、僕が運営する別サイトです。他の方が運営するサイトで試すと、サーバに余計な負荷を与えることになるため、やめましょう(笑)。
自動応答(AutoResponder機能)
Fiddlerには、特定の条件に合致するHTTP(S)リクエストに対して、Fiddlerが応答を返す機能があります。サーバにはリクエストは送信されません。この機能を使用すれば、Webアプリのテスト時に、サーバ側を変更せずに必要なレスポンスを作ることが可能です。
具体的には、以下の手順で作成します(画像にも手順を記載しています)：
- 「AutoResponder」タブを選択
- 「Enables Rules」チェックボックスを選択
「Enables Rules」チェックボックスにチェックが入っている間、Fiddlerの自動応答機能が有効になります。 - 「Add Rule」ボタンで、自動応答するルール(条件)を追加します。
- 「Rule Editor」で自動応答するルール(条件)の詳細を設定します。
最初のプルダウンには、合致するHTTP(S)リクエストを設定します。
2つ目のプルダウンでは、応答内容の詳細を設定します。応答内容は、インストールディレクトリの「ResponseTemplates」ディレクトリ内に保存されています。
以下画像では、「https://www.createindex.app/」に合致する場合、「200_SimpleHTML.dat」を応答するルールとなっています。 - 「Save」ボタンで、「Rule Editor」の内容を保存します。
保存した結果は、画面下部の一覧に表示されます。
実際にブラウザで、上記のRule EditorにあるURL(https://www.createindex.app/)を実行すると、以下の様な画面を表示します:
特定の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を選択する)
・キャプチャするホスト名を「;」区切りで並べる
- Client Process
クライアントプロセス(特定のブラウザなど)のHTTP(S)リクエスト・レスポンスをキャプチャ - Request Headers
リクエストヘッダに特定の情報があるもののみをキャプチャ
- Breakpoints
ブレークポイントを貼り、条件に合致した場合、HTTP(S)リクエスト・レスポンスを修正できる - Response Status Code
該当するレスポンスコードをキャプチャ一覧から削除。例えば、「Hide success (2xx)」のチェックボックスにチェックを入れると、HTTPレスポンスコードが200台のものは、キャプチャ一覧から削除する。
- Response Type and Size
特定のHTTP(S) レスポンスのみをキャプチャする設定。例えば、「Block image files」にチェックボックスを入れると、本ページは、以下の様に、画像が非表示の状態となる：
- Response Headers
クッキーを設定したり(Flag responses that set cookies)、特定のヘッダ情報を含んでいる(Flag responses with headers)キャプチャ情報を太字で表示します。以下は、Flag responses with headersに「Server」と入力した場合のキャプチャ一覧です(#71が入力前にキャプチャ、#74が入力後にキャプチャ。#74は、太字になっているのが分かる)：
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を起動するには、以下の2通りの方法があります：
- FiddlerScript Editorを使用する方法(こちらがおすすめ)
- Fiddler画面内のFiddlerScriptタブを使用する方法
FiddlerScript Editorを使用する方法(こちらがおすすめ)
メニュー→「Rules」→「Customize Rules…」を選択するか、Fiddler上で「Ctrl」キー+「R」キーを入力すると、FildderScript 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内の一番上にカーソルが移動するなど、あまり使い勝手はよくありません。
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メソッド内は、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を使う時の注意事項としては、大きく２点あります。以下に注意事項を示します：
Fiddlerはインターネット設定を書き換える
Fiddlerは、HTTP(S)リクエスト・レスポンスを確認できるようにするため、プロキシサーバとして動作します。
「ブラウザのプロキシ情報の保存」に詳細を記載していますが、Fiddlerはプロキシサーバとして機能するため、一部のインターネット接続情報を書き換えます。Fiddlerが異常終了した場合は、この接続情報が消えたままの状態となるため、インターネットに接続できない状態になる場合があります。
Fiddlerを使用する場合は、「ブラウザのプロキシ情報の保存」をご確認いただき、プロキシ情報をどこかに記録・保存する様にしてください。
Fiddlerを使い続けるとWindowsのスタートメニューが遅くなる可能性がある
Fiddlerを使い続けると、Windowsのスタートメニューを押した時(Windowsキーを押した時)の反応が悪くなるケースがあります。
Windows 10のバージョン22H1あたりから、本事象に遭遇する様になりましたが、Windows 11やWindows 8でも発生するかもしれません。
Fiddlerは「個人ストアにインストールした証明書」を以下のパスに保管します。Windowsキーを押した時に反応が悪くなる原因は、Windowsキーを押したときに、以下のパスにあるファイルをすべてスキャンするためです：
「%userprofile%\AppData\Roaming\Microsoft\SystemCertificates\My\Certificates\」
10分ほどネットサーフィンをしただけでも、以下の様にたくさんファイルが作成されます(HTTPSサイト毎に1つ作成していくため、すぐに膨大なファイル数となってしまいます)。そのため、ファイル数が多いほど、Windowsキーの反応が悪くなります：
Windowsキー + Rキーを押下→「certmgr.msc」と入力→Enterキー→証明書のMMCスナップインを表示→「個人」→「証明書」を選択しても、上記パスに保管されている証明書を確認できます：
この一覧から証明書を削除することもできます。
Fiddlerを使っていて、Windowsキーを押した時の反応が遅くなったと感じる場合は、上記のフォルダ内にあるファイルをすべて削除して、解消されるかご確認ください。
以上、Fiddlerの使い方でした。
Fiddlerというデバッグツールを使用して、少しでも、Webアプリの開発が楽になればと思います。
各機能をより詳細に説明した記事も用意しています。以下から各機能の詳細説明ページへ移動できます。
