Firefox 3とFirebugで始めるJavaScript開発

第2回 Firebugによるデバッグの基本,Console APIとその活用

この記事を読むのに必要な時間:およそ 4.5 分

さて,前回はインストールからFirebugのタブの基本的な部分について紹介をしてきました。今回は,Firebugに実装されているConsole APIの紹介と,Console APIを利用したデバッグ手法について解説していきます。

Firebugで利用できるAPI

Firebugには,デバッグに活用できる2つのAPIが実装されています。今回は,その2つあるAPIのうちConsole APIについて解説していきます。

Console API

Console APIはFirebugのタブだけでなく,コンテンツ側のJavaScriptから呼び出すことのできるAPIです。デバッグのために便利な関数があらかじめたくさん用意されています。これらの関数を以下に列挙しますので,目を通してください。

console.log(object[, object, ...])
渡された全てのオブジェクトをconsoleに出力します。また,第1引数を文字列にすることで,printf関数のように扱うことが出来ます。扱えるパターンは4種類あります。
  • %s:文字列
  • %d, %i:整数
  • %f:浮動小数点数
  • %o:オブジェクトへのリンク
console.debug(object[, object, ...])
基本的にはconsole.logと同じですが,エラーの行を表示します。
console.info(object[, object, ...])
基本的にはconsole.debugと同じですが,出力の先頭に「i」のアイコンをつけます。
console.warn(object[, object, ...])
基本的にはconsole.debugと同じですが,出力の先頭に「!」のアイコンをつけます。
console.error(object[, object, ...])
基本的にはconsole.debugと同じですが,出力の先頭に「×」のアイコンをつけ,ステータスバーのエラーに追加されます。
console.assert(expression[, object, ...]))
expressionがfalseなら第2引数以降をconsoleに出力する。第2引数以降はconsole.logと同様です。
console.dir(object)
渡されたオブジェクトのプロパティと値を全て出力します。
console.dirxml(object)
渡されたノードのソースツリーを表示します。HTMLタブと同様に表示され,クリックすることでHTMLタブで確認することができます。
console.trace()
この関数が呼び出された時点でのスタックトレースを出力します。
console.group(object[, object, ...});
console.groupEnd()が呼び出されるまでのconsoleの出力をグループ化します。引数はconsole.logと同様ですがその名前によってグループ化されるため,文字列を入れておけばよいでしょう。
console.groupEnd();
console.groupによるグループ化を終了します。
console.time(name[, reset])
console.timeEnd()が呼び出されるまでの実行時間を計測し,出力します。第2引数にtrueを渡すことによって時間をリセットする。
console.timeEnd(name)
console.timeによって計測されていた時間を出力します。console.timeで指定したものと同じ名前を指定する必要があります。
console.profile([title])
profile関数と同じく,console.profileEndが実行されるまでに実行された関数の解析を行います。
console.profileEnd()
console.profileによる解析を停止して結果を表示します。
console.count([title])
console.countが呼ばれた行が何回呼ばれたかをカウントし,出力します。引数にラベルを指定することができます。

console.logの基本を押さえる!

上記のように,Firebugで利用できるAPIにはたくさんのメソッドが用意されています。この中でも特に利用されるであろう,console.logの基本をここで確実に押さえておきたいと思います。console.logの挙動の理解度によってFirebugによるデバッグの速度は大きく変わってきますので,ここで確実に覚えておきましょう。

それでは,さっそくサンプルを交えつつ解説していきます。

著者プロフィール

堀邦明(ほりくにあき)

徳山工業高等専門学校卒業後,ヤフー株式会社に入社。Yahoo! JAPAN トップページのフロントエンドエンジニアとして主にJavaScript,PHPによる開発を行う。

また,個人の活動として,JavaScriptに関するオンライン上のイベント「Roppongi.JS」の企画・主催を行う。

コメント

  • Func2はfor文じゃないの?

    > 今回のような例の場合は,すべての値でFunc2が上回っているため,Firefox上ではfor文を使うよりもwhile文で回した方がわずかながら早い,ということが言えるようになります

    結果からするとfor文の方が早い

    Commented : #1  通りすがり (2010/01/15, 00:21)

コメントの記入