There is so much power packed into this little FireFox plug-in.

FireBugで使える役立つ関数テクニック色々。



FireBugをインストールしていても、多くの機能を使っていない方が多いのではないでしょうか？
次のような、便利な関数がFireBugには用意されています。

1. console.log 関数の sprintf 風使い方(次のように、sprintf 風に使えます)
   var x = "fubar";
   var y = 543;
   console.log("value of x is %s and value of y is %d", x, y);
2. console.info 関数 で情報アイコン付きでメッセージ表示
   console.info("This is an info level message");
   
3. console.warn 関数 で警告アイコン付きでメッセージ表示
   console.warn("This is a warn level message");
   
4. console.error 関数 でエラーアイコン付きでメッセージ表示
   console.error("This is an error level message");
   
5. console.time/timeEnd関数 で時間の簡単計測
   console.time("Sample Timers"); // 時間計測の開始
   for(x=10000;x>0;x--){} // 時間のかかる処理
   console.timeEnd("Sample Timers"); // 時間計測の終了

一括して、試しに次のプログラムを実行してみましょう。

<script type="text/javascript">
var x = "fubar";
var y = 543;
console.log("value of x is %s and value of y is %d", x, y);
var a = "This is an info level message";
var b = "This is a warn level message";
var c = "This is an error level message";
console.info("This is an info level message");
console.warn("This is a warn level message");
console.error("This is an error level message");
console.time("Sample Timers");
for(x=10000;x>0;x--){}
console.timeEnd("Sample Timers");
</script>

するとFireBugのコンソールに、次のように表示されます。



タイマー機能はかなり使えそうですし、メッセージをアイコン表示できるのもデバッグ時に便利そうですね。