読者です 読者をやめる 読者になる 読者になる

永井ギャラクシー つくる部

関西を拠点とするウェブ制作チーム。あらゆる“つくる”にまつわる日記。つくる部部長(つ部長)が担当します。好きな時に更新します♪

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

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

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

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

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

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

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

  1. Download Fiddler Web Debugging Tool for Free by TelerikからFiddlerをダウンロードしてインストールします。
    windows8の方は「.NET4」を選ぶそうです。windows7以下の方は「.NET2」を選択するそうです

  2. Fiddlerを立ち上げたら「コントロールパネルのインターネットオプション」でプロキシサーバにチェックを入れて、アドレス:127.0.0.1、ポート:8888を設定
    f:id:nagai-galaxy:20160306162200p:plain

  3. IEを立ち上げて、デバッグしたいホームページを表示させると下記のように通信の流れが閲覧できることが確認できます。

    f:id:nagai-galaxy:20160306162623p:plain

  4. 差し替えたいJavaScriptファイルを準備しておきます
    f:id:nagai-galaxy:20160306163255p:plain
  5. JavaScriptファイルを差し替えたいホームページを開いて、差し替えたいファイルを一覧から探し、クリックします。右のタブで「AutoResponder」に切り替えて、「Enable rules」にチェックし、「Add Rule」をクリックします。

    f:id:nagai-galaxy:20160306163900p:plain

  6. Rule Editorの下の欄にローカルのJavaScriptファイルのパスを入れて「Save」をクリックします。
    f:id:nagai-galaxy:20160306164155p:plain
  7. ローカルのJavaScriptファイルに挿し変わってJavaScriptファイルが実行されたことが確認できます!これで、デバッグし放題です!!以上、便利なツールのご紹介でした!!

    f:id:nagai-galaxy:20160306164608p:plain