前の記事 ≪:透明感があってハイクオリティーなフリーアイコン集「Crystal Clear」
次の記事 ≫:HTTP用負荷ツールいろいろ

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

2007年05月18日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Seifi.org Blog Archive FireBug Tips and Tricks
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のコンソールに、次のように表示されます。



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

関連の記事検索:firebug, Firefox, JavaScript, Tips, デバッグ, extension
スポンサード リンク

By.KJ : 2007年05月18日 07:05 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)