業務で手放せないツール："Fiddler"でローカル環境を構築していないwebサイトのCSSやJavascriptをデバッグする
Fiddlerとは？
ネットワークキャプチャーツールという、 webアプリケーションのデバッグに便利なツールです。
色々な機能があるのですが、 今回はFiddlerの機能を利用して、 ローカル環境を構築していない状態で、ローカルPCからwebサイトのcssファイルやjsファイルをデバッグする方法をご紹介します。
ダウンロード
下記URLからダウンロードしてください。
http://www.telerik.com/fiddler
- 動作環境が異なる「Fiddler for .NET4」と「Fiddler for .NET2」がありますが、中身に違いはないようなので「Fiddler for .NET2」でOKです。
- ダウンロード時にメールアドレスの登録が求められます。
インストール
1) 規約に同意します
2) インストール先を選択します
3) Windows8.1以降の方は「AppContainer」に関する注意事項が表示されるようです。
「いいえ」を選択します。
4) インストール完了です
使い方
1) Fiddlerを起動し、「AutoResponder」タブを選択してください
2) デバッグしたい対象のページをブラウザで開きます。
※今回は例としてYahoo!Japanを使用しています。
左側のリストに、現在使用しているPCで行っている通信の履歴が表示されるので、 その中にある、デバッグしたい対象のCSSファイルを選択します。 リストから探すのが難しい場合は、Ctrl + F で検索ウィンドウを開き、 "css" などの単語で検索することで、ヒットしたリストがハイライト表示されます。
4) 「Add rule」でルールを追加
対象のcssファイルを選択したら、「Add rule」ボタンを押してルールを追加します。 ルールとは、Fiddlerが「web上のAというファイルの代わりに、ローカルにあるBというファイルを読み込む」ための設定のことです。
5) ローカルで使用するファイルを選択する
ローカル上(自分のPC)で使用するファイルのパスを設定します。
※web上のCSSの代わりに読み込まれるファイルのため、ファイルの中身はweb上のCSSと同じである必要があります。
web上のファイルをそのままローカル保存して使用してもOKです
6) 設定したルールを有効化する 「Enable rules」と「Unmatched requests passthrough」のチェックボックスをONにします。
これをONにしないと、設定したルールが反映されません。
7)ローカルのCSSを編集し、ページを再読み込みする
例として、「ページ上部へ戻る」ボタンの色を変更します。
編集前は下記のような色ですが
ローカル上のCSSを編集後、ページを再読み込みすると、下記のとおり、
ローカルで指定したボタン色に変化しています。
もちろんこれは、web上にある実際のCSSを変更したのではなく、 自分PCだけこのような表示になっています。 Fiddlerを終了するか、ルールを無効にすると、元通りの見た目に戻ります。
環境を構築せずにデバッグができるFiddler
ローカル環境を立てるまでもない、ちょっとしたバグの確認や、 担当案件以外のサイトで会社の他のメンバーから「ちょっとこのサイト見て」と相談された時など、 実際の現場でとても重宝しています。
今回はCSSを例にしましたが、私の場合はjavascriptのデバッグの方が活躍する機会が多いです。 みなさんもぜひ活用してみてください。
