朝だ、朝だ、晦日なのに朝だ、小堤です。
ExtJSだけでなく、JavaScriptでの開発にはFireBug欠かせませんね。
しかし、Console API、console.logとかconsole.debug以外使っていますか？
先日、ExtJSの勉強会でconsole.dirについてちょこっと終わった後にデモったんですが、好評でしたので、追記ってことで。
console.dirは、オブジェクトをDOMタブで表示しているように、ツリー上に一気に表示してくれます。
データの確認時、深いオブジェクトをいちいちクリックしないで、まとめて表示できるってわけですわ。
んで、今日は、３つほど。
- グループにまとめて表示
- 実行時間を計測する
- プロファイルを生成する
を紹介します。
グループにまとめて表示
console.group( ‘グループ名’ );
～FireBugのConsoleAPIを実行～
console.groupEnd();
groupからgroupEndまでに出力されるConsoleAPIの出力を、グループ化して表示してくれます。
折りたたみできるので、いろんなところにConsoleAPIを埋め込む時にいいのかも。
実行時間を計測する
こっから、ここまで何msで動いているんだろう？と思ったことありますよね？自前で計測したり・・・。
console.time( ‘keisoku1’ );
console.timeEnd( ‘keisoku1’ );
timeとtimeEndの間の処理の時間をコンソールに表示してくれます。
プロファイルを生成する
まぁ・・timeとにたようなものですが。
console.profile( ‘pro1’ );
～いろんなJavaScriptの処理～
console.profileEnd();
間の処理のプロファイルを生成してくれて、どこにどれくらいの時間がかかっているか？などを一括でみることができます。
FireBugはこれ以外にもコマンドラインAPIがあり、ページに対してコマンドラインからJSコードを流し込むことで、いろいろ確認ができます。
そこらへんは、まだこんど。
要するにconsole.logみたく、ただオブジェクト確認だけじゃないぞーってことです。
意外と忘れがちなので、メモ。
