すがブロ

sugamasaoのhatenablogだよ

Web開発者が知っておくべきローカルプロキシーツール Fiddler

tools

最近の愛用は

Firefox を普段使っている時は、 HttpFox を使っています。
昔は

を使っていたのですが、けして見やすいというわけでは無かったのと、実際にボディの中身を見たいという時にパワー不足が否めません。
そこで、 HttpFox です。

レスポンスコードを色分けしてくれたりするので、個人的には見やすいと思う。
たぶん、Firebug の接続タブでも同等のことができると思うのだけど、ウィンドウ領域の使い方とか、色分けの部分とかで HttpFox の方が好き。
こんな感じで閲覧できます。

リクエストパラメータ等も見やすく整形してくれるので助かります。

本題

本題は HttpFox ではなく、Fiddler についてです。

たぶん、結構有名なツールなので知ってる人も多いと思いますが。。。
HttpFox でも十分な事が多いですが、 Fiddler を使うと何がうれしいって、ブラウザのアドオンじゃないのでほかのブラウザで検証している時にも使用できること。

そして、サーバ上のファイルを差し替えることができる、ということ

サーバ上にアップされている JS や swf 等をローカルにあるファイルに差し替えて実行することができるので、あたかも本番環境のごとく動作の検証や修正ができます。
ですので、本番環境だと動作がおかしい……なんて時は、こんな感じで動作の確認等をすると良いと思うんですね。

一番単純なやりかた
  • 一度ページを閲覧して、左側のペインに、差し替えたいファイルへのリクエストがあることを確認します
  • 該当リクエストを右側ペインの「AutoResponder」の領域に D&D します

  • AutoResponder の下側にある Rule Editor の右側のドロップダウンリストで「Find a file...」を選択し、差し替えたいファイルに変更します*1
  • 以下の例では、log.gif があったらローカルのファイルに差し替えるように設定されてます。


そうして、再度ページをリロードすると……

わかりにくいですけど、Yahoo! のロゴがしろい別の画像にさし変わっているのが確認できると思います。

これを応用して

たとえば、非同期通信で読み込むページや画像等を 404 で応答するようにしてエラー時の処理をテストする、等が可能になります。
これ、手軽にできて本当に便利なのですけど、いかんせん Windows 専用なんですよね。だれか、Macで Fiddler くらい簡単に使えるローカルプロキシーツールって知ってたら教えて下しあw

*1:Rule Editor の左側を編集すれば、どんな条件で実行させるかを変えたりできます