Fiddler を利用したモジュール置き換えデモの解説

先日 (5/23) の「第５回 HTML5ビギナーズ（jQueryをやります！）」で「Fiddler でモジュール入れ替えテストを手軽に」というライトニング トークを行いました。その際に実施したデモの手順を解説したいと思います。

ライトニング トークのスライドはこちらからご覧いただけます

デモの内容の概要は、Fiddler の AutoResponder 機能を利用して、Web サイトの特定のコンテンツを別の物に差し替えてクライアント (ブラウザー) に渡すというもので、今回の場合は jQuery を異なるバージョンに置き換えました。それでは実際のデモ環境の作成と、デモの手順を説明しましょう。

環境の作成

デモ環境は、Windows クライアントに Fiddler をインストールするだけです。Fiddler は以下のページから最新版をダウンロードしてインストールします。

• Download Fiddler http://www.telerik.com/download/fiddler

Fiddler の動作には .NET Framework が必要なので、インストール済みの .NET Framework がある場合はそれにあわせて Fiddler4 または Fiddler2 をダウンロードします。なお Windows 7 には .NET Framework 2.0 を含む 3.5.1 が、Windows 8 には .NET Framework 4.0 を含む 4.5 が、Windows 8.1 には .NET Framework 4.0 を含む 4.5.1 含まれています。

アルファバージョンの mono 版もあり、Linux や MacOS にもインストール可能ですが、まだ動作が安定しておらず機能も十分でないようなので、実験的に試す場合以外はお勧めできません。Linux や MacOS の場合は、modern.IE からダウンロードできる IE テスト用仮想マシンを利用して、その上に Fiddler をインストールするのが良いでしょう。

なお Windows 8 / 8.1 を利用する場合、イマーシブ モード (元 Metro、スタート画面の、とも言います) の Internet Explorer (IMIE) や、拡張保護モードが有効なデスクトップ版の Internet Explorer は、そのままでは Fiddler を利用できません。これは、それらの Internet Explorer は AppContainer と呼ばれる一種のサンド ボックス内で動作しており、AppContainer 内のアプリは既定では Loopback (Lochalhost、127.0.0.1) にアクセスできないという制限が付けられているためです。
Windows 8 / 8.1 で試す場合は、Internet Explorer 以外のデスクトップ版ブラウザーを利用するか、または Internet Explorer の拡張保護モードが有効の場合は無効に設定変更してから実行しましょう。拡張保護モードは [インターネット オプション] の [詳細設定] タブから変更できます。

拡張保護モードが有効だった場合は、テストが終わったら有効に戻しておくことをお勧めします。拡張保護モードによってより強力なセキュリティ上の保護が得られます。
また Fiddler に付属している AppContainer Loopback Exemption Utility を利用して、AppContainer 内のアプリに対して Loopback へのアクセスを許可するよう構成することもできます。

デモの実行

デモではテスト サイト (http://ammay23.azurewebsites.net/) を利用しました。このサイトは Microsoft Azure の無料の Web サイト プランで5分位で作成したものですが、他の jQuery を使っているサイトでも同様のテストが可能です。

デモは以下の手順で実行できます。

1. 置き換えるコンテンツを用意します
   今回はサーバーから提供される jquery.min.js (バージョンは 1.11.1) を jquery-2.1.1.min.js に置き換えたいので、jQuery のサイトからダウンロードしてローカルに保存しておきます
2. Fiddler を起動します
   起動するとすぐに HTTP トラフィックのキャプチャが開始され、左側のペインにセッション リストが表示されます
3. Fiddler のウィンドウの右下、[Capturing] (キャプチャ中) の表示の隣をクリックし、[Web Browsers] を選択しておきます。
   
   これでブラウザー以外のアプリケーションからのトラフィックはキャプチャされなくなります。
4. Ctrl + x を押していったんセッション リストをクリアします
5. ブラウザーでテスト サイトを開きます
   Fiddler にはテスト サイトへのアクセスが記録されます
6. Fiddler のウィンドウの右下の [Capturing] をクリックして、いったんキャプチャを停止します
7. ここで開いた Web ページの [Show jQuery version] をクリックすると、以下のように 1.11.1 が表示されます
   
8. ページのソースを確認すると、
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   となっています
9. Ctrl + f を押して検索ダイアログを呼び出します
   今回は jquery.min.js を置き換えたいので、[Find] 欄に jquery.min.js と入力し、[Find Sessions] をクリックします
   
10. jquery.min.js を取得しているセッションがハイライトされます
    
11. 見つかったセッションをクリックして選択し、右側のペインで [AutoResponder] タブをクリックします
    [AutoResponder] タブに切り替えたら、[Enable automatic responses] と [Unmatched requests passthrough] にチェックを入れます
    
12. [Add Rule] をクリックします
    下の方の [Rule Editor] 欄が利用可能になります。上のボックスに置き換えたいリソースのセッションにマッチする条件を指定します。今回は jquery.min.js を別の内容に置き換えたいので、以下のように “jquery.min.js” だけ残しておけば良いでしょう。
    
    ※ ここでは正規表現を含む複雑なマッチ条件を記述可能です
    右側の Test… をクリックすると、入力したパターンが選択中のセッションにマッチするか確認できます
13. 下のボックスで置き換えるコンテンツの取得先を指定します。
    今回はローカルに保存した jquery-2.1.1.min.js を指定しますので、ドロップダウンから [Find a file…] を選択し、保存したファイルを選択します
    
14. [Save] をクリックすると、AutoResponder が記録され、有効になります
15. Fiddler の右上にある [Clear Cache] をクリックして Internet Explorer のキャッシュを削除します
    ※ Internet Explorer 以外のブラウザーを使う場合は、それぞれのブラウザーの方法でキャッシュをクリアします
16. Fiddler のウィンドウの右下 (最初に [Capturing] と表示されていた場所) をクリックして、キャプチャを再開します
17. ブラウザーに戻って、F5 を押すなどしてテスト サイトのページを更新します
18. ここで開いた Web ページの [Show jQuery version] をクリックすると、以下のように 2.1.1 が表示されます
    
19. ページのソースを確認すると、
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    となっており、最初と変わらないことが確認できます

以上、勉強会当日のデモ手順でした。

Fiddler についてはライトニング トークのスライドにも書いていますが、「実践 Fiddler」(https://www.oreilly.co.jp/books/9784873116167/) が最良の解説書です。興味のある方はぜひこちらを読んで、さらに検証や開発に役立ててください。