Firefox 3とFirebugで始めるJavaScript開発

第4回 ブレークポイントによるデバッグとFirebugのこれから

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

最終回となる今回は,前回触れられなかったScriptタブでのデバッグ方法,Firebugの拡張である「yslow」の説明,そして最後にFirebugの今後について紹介します。

ブレークポイントの設定方法

FirebugではJavaScriptにブレークポイントを設定することができます。次のコードで試してみましょうex01.html)。

リスト1 ex01.htmlの抜粋

function Func(){
        var num = Math.floor(Math.random()*1);
        var h1 = document.getElementsByTagName('h1')[0];
        if(num<5){
                h1.innerHTML = 'gihyo.jp';
        }else{
                h1.innerHTML = 'Yahoo!';
        }
};
YAHOO.util.Event.on(window, "load", function() {
        YAHOO.util.Event.on('change', 'click', Func);
});

Scriptタブよりブレークポイントを設定したいファイルを選択します図1)。

図1 Scriptタブに表示させるファイルの選択

図1 Scriptタブに表示させるファイルの選択

ファイルを選択したら,次はブレークポイントをセットしたい行の頭をクリックします図2)。

図2 Scriptタブに表示させるファイルの選択

図2 Scriptタブに表示させるファイルの選択

上では12行目,14行目,16行目にブレークポイントをセットしました。 実行し,ブレークポイントに到達すると,右側に情報が表示されます図3)。

図3 Scriptタブ右側に変数の情報を表示

図3 Scriptタブ右側に変数の情報を表示

さらに,Stackタブではスタックトレースを確認できます図4)。

図4 スタックトレースの確認

図4 スタックトレースの確認

そしてBreakpointsタブではブレークポイントの確認をすることができます図5)。

図5 ブレークポイントの確認

図5 ブレークポイントの確認

ブレークポイントにさしかかると次のアイコンから次の動作を決定することができます図6)。

図6 アイコン

図6 アイコン

左から順に「Continue」「Step Into」「Step Over」「Step Out」の動作を行います。

試しにStep Intoのアイコンをクリックすると,ブレークポイントの設定されていない次の行へ進みスクリプトが停止することを確認できます。

条件付きブレークポイントの設定方法

Firebugでは,ある条件の時だけスクリプトを停止するという,条件付きブレークポイントを設定することができます。

設定したい行の頭を右クリックすると,次のように条件式を入力するバルーンが表示されます図7)。

図7 条件付きブレークポイント設定バルーン

図7 条件付きブレークポイント設定バルーン

ここに,次のように「num < 5」と入力してみてください図8)。

図8 条件式の入力

図8 条件式の入力

これで,このブレークポイントはこの条件式がtrueの時だけにスクリプトが停止するようになります。

著者プロフィール

堀邦明(ほりくにあき)

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

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

コメント

コメントの記入