JavaScript のログを取る

新しい友達、コンソールログ

Firebugのコンソールに何事かを書き出す最も簡単な方法はこのような感じです: console.log("hello world")

あなたは好きなだけ引数を渡せます。引数は console.log(2,4,6,8,"foo",bar) のように一列に連結されます。

オブジェクトのハイパーリンクのログを取る

console.log および関連するファンクションは、ただテキストをコンソールに書き出す以外にも色々なことが出来ます。 どんな種類のオブジェクトも console.log に渡すことが出来、それはハイパーリンクとして表示されます。要素、ファンクション、配列、とにかくなんでもです。それらのリンクをクリックすると最も適切なタブでそのオブジェクトが調査されます。

文字列のフォーマット

console.log は printf の手法で文字列をフォーマットすることが出来ます。つまり、 console.log("%s is %d years old.", "Bob", 42) のような感じです。

コードの色分け

console.log の他にも視覚的、意味的に区別されたメッセージを呼び出すことが出来るファンクションがあります。例えば、 console.debug, console.info, console.warn, console.error 等です。

タイミング＆プロファイリング

Firebug は JavaScript のパフォーマンスを計測する二つの簡単な方法を提供します。

low-fi アプローチは計測したいコードの前で console.time("timing foo") を呼び出し、その後に console.timeEnd("timing foo") を呼び出す方法です。こうすると、Firebug は二つの間にあるコードの実行にかかった時間を計測します。

一方、high-fi アプローチは JavaScript プラファイラーを使います。 console.pforile() を計測したいコードの前に呼び出し、その後 console.pfofileEnd を呼ぶようにします。こうすることで、その間にあるファンクション一つ一つでどのくらいの時間が使われたかが詳細に報告されます。

スタックトレース

console.trace() を呼び出すと、Firebug は有益なスタックトレースをコンソールに書き出します。どのファンクションがスタックにあるかのみならず、それぞれのファンクションに渡された引数の値まで判ります。オブジェクトやファンクションをクリックするとそれらを調査することが出来ます。

グループをネストして表示

メッセージの一覧が左揃えだと読みづらいこともありますが、Firebug は適宜インデントを入れることでこれを解決しています。 console.group("a title") を呼び出すと新しいインデントブロックが始まり、 console.groupEnd() を呼び出すとブロックが閉じられます。あなたは何段階でも好きなだけの深さにインデントを入れる事が出来ます。

オブジェクトの調査

オブジェクトのプロパティや HTML の断片の要素全てをダンプするために何度も何度もコードを手書きしたことがありませんか？Firebug ではそんなことをする必要はありません。

console.dir(object) を呼び出すと、まるで DOM タブの小型バージョンのように、オブジェクトのプロパティがインタラクティブに記録されます。HTML や XML 要素の上で console.dirxml(element) を呼び出すと、HTML タブの小型バージョンのように XML のアウトラインが表示されます。

表明せよ

表明は、変更に際してあなたのコードの信頼性を確保する素晴らしい方法です。Firebug は便利な表明機能を備えており、もし表明違反が起こった場合は非常に有益なエラーメッセージが書き出されます。