ブラウザが読み込むファイルをローカルファイルに差し替える


# やりたいこと
+ ブラウザで読み込むファイルをローカルのファイルに差し替えたい。でもあまり面倒なことはしたくない。

# 環境

+ Windows（Mac版もあるけど、なんだか残念）
+ .NET必須


# 準備

下記URLからダウンロードして、インストールする。

http://fiddler2.com/

以下、.NET4のほうで説明（違いはないと思うけど）。


# 起動する

![スクリーンショット 2013-11-14 20.48.19.png](https://qiita-image-store.s3.amazonaws.com/0/25240/916a909e-7679-4bbd-337b-975bb5f8a0dc.png "スクリーンショット 2013-11-14 20.48.19.png")

# ネットワークを監視してみる
この後、ブラウザを立ち上げて、Googleで検索→Qiitaにアクセスしてみる。

![スクリーンショット 2013-11-14 20.55.56.png](https://qiita-image-store.s3.amazonaws.com/0/25240/849113c9-bd83-3042-2fea-fd4ff2eeb39c.png "スクリーンショット 2013-11-14 20.55.56.png")

左ペインを見てみると、いろいろ読み込んでいるのがわかる。

![スクリーンショット 2013-11-14 20.52.33.png](https://qiita-image-store.s3.amazonaws.com/0/25240/3e4d9d07-a95f-8c36-c090-bc7272f1cd10.png "スクリーンショット 2013-11-14 20.52.33.png")


# フィルタリングしてみる
右ペインの「Filters」タブをクリックする

![スクリーンショット 2013-11-14 20.52.43.png](https://qiita-image-store.s3.amazonaws.com/0/25240/feedc141-9388-7d36-8e44-0aa6cd5fefab.png "スクリーンショット 2013-11-14 20.52.43.png")

「Use Filters」チェックボックスをクリックすると、その下の項目が活性化される。

![スクリーンショット 2013-11-14 20.52.53.png](https://qiita-image-store.s3.amazonaws.com/0/25240/cd3a1557-fbf5-e8d5-4d52-346d2d89b245.png "スクリーンショット 2013-11-14 20.52.53.png")

キャプチャのように２つのセレクトボックスで「Show only Internet Hosts」と「Show only the following Hosts」を選択し、その下のテキストエリアに絞り込みたいhost名を入れる。
今回はqiitaのみに絞り込んでみる。
入力したら、右上の「Actions」ボタンをクリックする。

![スクリーンショット 2013-11-14 20.53.29.png](https://qiita-image-store.s3.amazonaws.com/0/25240/364fa6b9-59f4-7536-4d6a-8ae592bdad47.png "スクリーンショット 2013-11-14 20.53.29.png")

フィルタリングを実行してみる。

![スクリーンショット 2013-11-14 20.53.33.png](https://qiita-image-store.s3.amazonaws.com/0/25240/b06a5947-f171-bf8c-7982-c659b860d3b2.png "スクリーンショット 2013-11-14 20.53.33.png")

実行後。qiita.comからのファイルだけに表示が絞り込まれる。

![スクリーンショット 2013-11-14 20.53.39.png](https://qiita-image-store.s3.amazonaws.com/0/25240/520e8f75-b22a-f871-4d5a-969782f8eee7.png "スクリーンショット 2013-11-14 20.53.39.png")

# ファイルをローカルのファイルに差し替える

今回はロゴをローカルの画像と差し替えてみる。
右ペイン「AutoResponder」タブをクリックする。

![スクリーンショット 2013-11-14 20.54.34.png](https://qiita-image-store.s3.amazonaws.com/0/25240/75a12250-1d3d-4350-67f0-412fd79a1802.png "スクリーンショット 2013-11-14 20.54.34.png")

ロゴ画像と思われるURLを左ペインから選び、右の色かかっているところにD&Dする。

![スクリーンショット 2013-11-14 20.54.42.png](https://qiita-image-store.s3.amazonaws.com/0/25240/ade5ac45-64dd-b700-0644-76c4088cf6bb.png "スクリーンショット 2013-11-14 20.54.42.png")

右ペイン下の「Rule Editor」の２つあるセレクトボックスの下のセレクトボックスを開き、「Find a file...」を選んでローカルの画像ファイルを選択する。

![スクリーンショット 2013-11-14 20.54.51.png](https://qiita-image-store.s3.amazonaws.com/0/25240/7a5642dc-f409-2683-8c22-d449a15b6989.png "スクリーンショット 2013-11-14 20.54.51.png")

画像ファイルを選択し終わったら、右ペイン上にある３つのセレクトボックスを全部チェックする。

![スクリーンショット 2013-11-14 20.55.23.png](https://qiita-image-store.s3.amazonaws.com/0/25240/9c16e987-2a78-dc62-929d-dd398eb7ca31.png "スクリーンショット 2013-11-14 20.55.23.png")

ブラウザをリロードすると。。。

![スクリーンショット 2013-11-14 20.55.41.png](https://qiita-image-store.s3.amazonaws.com/0/25240/6909ef84-05cf-2922-89a9-bc4858590821.png "スクリーンショット 2013-11-14 20.55.41.png")

XPの標準で入っている画像に差し替えられました(´・ω・｀)


# うれしい点
+ 右ペイン下の「Rule Editor」の「Exact:http://...」では「regex:」に変更することで正規表現を使うことができる。また、正規表現で狙ったファイルが取れているかのチェックもすることができる。
+ Web開発のデバッグ時にローカルのJSファイルと差し替えることができるので、本番サーバのソースを変更せずにデバッギングすることができる（熱い）。


# 残念な点
+ 正規表現を使って、「このディレクトリ下のファイルを、このローカルディレクトリ下のファイルに全部置き換える」などのような、ファイルをまとめて差し替えることができない（=ファイル１つにつき、１つずつルールを追加していくことになる）。n個の一致したファイル→1つのローカルファイルの差し替えはできる。