サーバへアップしなくてもJavaScriptのデバッグ出来るのプロキシFiddler

おはようございます、つ部長です！

今回は、フロントエンジニアがJavaScriptのファイルをサーバにアップしなくてもサーバで結果を確認することができるプロキシソフトのFiddlerを紹介したいと思います。

プログラマーと連携してサービスを作ってるデザイナがJavaScriptをデバッグするのにおすすめかも？！

よくあるのが、プログラマーさんにアップしてもらわないと結果が確認できないというケースが昔、多々あったのでこれを導入すると効率化につながるかもしれません。

仕組みは、サーバ上にあるJavaScriptファイルをローカルのJavaScriptファイルと差し替えることでデバッグを容易に出来るというものです。

手順をまとめて紹介したいと思います！

Download Fiddler Web Debugging Tool for Free by TelerikからFiddlerをダウンロードしてインストールします。
※windows8の方は「.NET4」を選ぶそうです。windows7以下の方は「.NET2」を選択するそうです
Fiddlerを立ち上げたら「コントロールパネルのインターネットオプション」でプロキシサーバにチェックを入れて、アドレス：127.0.0.1、ポート：8888を設定
IEを立ち上げて、デバッグしたいホームページを表示させると下記のように通信の流れが閲覧できることが確認できます。
差し替えたいJavaScriptファイルを準備しておきます
JavaScriptファイルを差し替えたいホームページを開いて、差し替えたいファイルを一覧から探し、クリックします。右のタブで「AutoResponder」に切り替えて、「Enable rules」にチェックし、「Add Rule」をクリックします。
Rule Editorの下の欄にローカルのJavaScriptファイルのパスを入れて「Save」をクリックします。
ローカルのJavaScriptファイルに挿し変わってJavaScriptファイルが実行されたことが確認できます！これで、デバッグし放題です！！以上、便利なツールのご紹介でした！！