Firefox 3とFirebugで始めるJavaScript開発

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

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

console.profileを使って,関数ごとの実行時間を測定する

console.profileは,最初にも説明したとおり,console.profileEndが呼び出されるまでに実行された関数の解析を行います。以下のコードを埋め込んだページを作成してください。

リスト5 ex05.html(抜粋)

<script type="text/javascript">
console.profile();
function Func(){
        var i=0;
        while(i<1000){
                console.count();
                i++;
        }
};
function Func2(){
        for(var i=0;i<1000;i++){
                console.count();
        }
}
for(var i=0;i<10;i++){
Func();
Func2();
}
console.profileEnd();
</script>

基本的には前回のコードと同じですが,while文とfor文それぞれを関数化しました。また,コードの最初と最後にconsole.profileとconsole.profileEndを挿入しています。

実際に作成したページ(ex05.html)を読み込むと,profileによる解析結果がconsoleタブに表示されます図10⁠。

図10 consoleの複数行入力

図10 consoleの複数行入力

最初に表示されているのは,すべての関数の実行時間の合計と合計呼び出し回数です。

詳細の部分はそれぞれ,次のことを意味します。

Function
関数の名前。匿名関数はprofileによって解析されないため注意してください。
Calls
その関数が呼び出された回数を表示します。今回の場合はそれぞれ10回ずつ関数が呼び出されているためどちらも10と表示されています。
Percent
その関数の実行時間の割合を表示します。
Own Time
その関数の実行にかかった時間の合計です。
Time
ネストされた関数も含めたその関数の実行時間の合計です。
Avg
その関数1回あたりの平均実行時間です。
Min
その関数1回あたりの最短実行時間です。
Max
その関数1回あたりの最長実行時間です。
File
その関数の場所を示します。

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

以上のようにconsole.proflieを使うと関数ごとに詳細な実行時間を出してくれるため,console.timeよりも詳細な解析を行うことができます。もちろん最初にも書いたとおり,console.profileは匿名関数などは解析の対象にならないため,そのあたりは工夫をしていく必要があります。

また,今回はwhile文とfor文のループの速度の比較のためにconsole.timeとconsole.profileを使いましたが,これまで説明してきた特性を理解すれば,もっと複雑な処理の際にどのような方法で実行速度を測定するのがもっとも適切かを判断できるようになると思います。

※1
単純なループ処理の上記スクリプトにおける比較結果であり,あらゆる状況下でのループ処理でwhile文を推奨するものではありません。

次回予告

さて,今回はFirebugに実装されているAPIの1つ,Console APIについて解説をしました。

次回は,もう1つのAPIである,Command Line APIと各タブごとについている細かい機能について解説していきたいと思います。

著者プロフィール

堀邦明(ほりくにあき)

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

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