業務で手放せないツール："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を使用しています。

3) デバッグしたい対象のCSSファイルを選択する

左側のリストに、現在使用している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のデバッグの方が活躍する機会が多いです。 みなさんもぜひ活用してみてください。

<javascript>データ型の種類と参照型の値を取り扱う際の注意点

データ処理：型の種類

javascriptで取り扱うデータには、大きく分けて2種類あります。

• 基本型（プリミティブ型）
• 参照型（オブジェクト型）

基本型（プリミティブ型）

• 数値型(number)
• 文字列型(string)
• 論理値型(boolean)
• 特殊型(null/undifind)

特長

• 変数には、値が直接格納される
• 値の受け渡し時には、値そのものが受け渡される

var a, b;
a = 0;
b = a;
b = 5;
console.log(b); // 5
console.log(a); // 0 <-値自体が受け渡されたため、aは変わらない

参照型（オブジェクト型）

• オブジェクト(object)
• 配列(array)
• 関数(function)

特長

• 変数には値が格納されている配列の場所（メモリアドレス）が格納される
• 値が変更されると、配列自体の値が変更されるため、参照先が同じになっている変数全てに影響がある

var a, b;
c = [0,1,2];
d = c;
d[0] = 7;
console.log(d) // [7,1,2]
console.log(c) // [7,1,2] <- 参照先が渡されたため、cも変わる

この場合、 dは参照するアドレスがcから受け渡されたため、dが参照している配列=cが参照している配列となります。 そのため、dで配列の中身を編集すると、cも同じく変化してしまいます。

オブジェクトの値についての注意

オブジェクトは参照型ですが、 下記のような例では、一見して基本型と同じような挙動に見えます。

var e, f;
e = document.getElementById("hoge");
f = e;
f = document.getElementById("fuga"); //この時点で新しい参照先が作成される

console.log(e) // <div id='hoge'></div>
console.log(f) //<div id='fuga'></div> (eは変わらない)

この場合、f=eのときに、eの参照先をコピーしたのではなく、 fが新しい参照先を作成したため、eとfが異なる状態となります。

id名を直接指定すれば、document.getElementById()を使っているのと同じ結果が返ってくる

HTML内にIDを記載している場合、 document.getElementById()を書かなくても、ID名を直接入力するだけでそのエレメントを操作することができます。

サンプル

codepen.io

サンプルではID：hoge がjavascript内にいきなり出てきますが、ちゃんとwidthの値を取得することができています。

javascriptで全角文字のみを抽出する正規表現(半角カナにも対応)

正規表現で全角文字だけをヒットさせたい

全角文字を正規表現でヒットさせたい場合、

     /[^\x00-\x7E]+/g;

とすると「半角カナ」もヒットしてしまいます。

ASCII文字+半角カナを除いた文字列をヒットさせたい場合、

    /[^\x00-\x7Eｧ-ﾝﾞﾟ]+/g;

とすることで対応できました。

補足

[正規表現] 半角文字のみ取得 と 全角文字のみ取得 - 続くかな・・・

こちらの内容でも半角カナを除くことができるようです。 こちらの表記のほうがスマートかもしれませんね…

CSSでfont-size以外にemを使用したときに注意すべきポイント

余白の数値を合わせているのにレイアウトが揃わない

仕事で既存のレイアウトを調整しているとき、emの値を合わせているのにレイアウトが揃わない…ということでちょっとハマってしまいました。

emとは、親要素のfont-sizeの値を参照する単位です。 親要素のfont-sizeは同じなのにどうしてだろう、と思っていたのですが…

フォントサイズと余白で基準にする値が違う

width/height および margin/paddingにemを使用した場合、その要素自体のfont-sizeの値が基準となります。

.box1{
  font-size:1.0em;
  width:5em;
  height:5em;
  padding:1.0em;
  margin:0.5em;
}
.box2{
  font-size:0.5em;
  width:5em;
  height:5em;
  padding:1.0em;
  margin:0.5em;
}

この場合それぞれの幅、余白の値は、 box1は1em=16pxが基準になるのに対し、 box2は1em=8pxが基準となります。

codepen.io

参考

margin - CSS | MDN