2010年4月4日日曜日

FireBugのステップ実行

取締役就任というジョークはおいといて、オイラはJavaScriptと格闘中・・・。

JavaScriptでAjaxバリバリなWebアプリの改修をしているが、デバッグに一苦労。最初はポイントごとにalert関数で変数の値を確認していたが、そのたびに動きが止まるので使い勝手がよろしくない。デバッグが完了した後に取り除くのも面倒だし。

しばらくして、FireBugが入っているならconsole.logでコンソールに変数の内容を出力できることに気づく。これならalertと違って作業終了後に一括削除できる。しかし、変数の移り変わりが激しいため、ポイントごとにコマンド文を入れるのが面倒なことに変わりはない。

ということで、初めてFireBugのステップ実行を試してみた。使い方は、エラーの原因と思われる個所の手前にブレイクポイントをセットして実行し、止まったところからひとつずつステップを実行する。変数の内容がステップごとに確認できるのが便利だ。

そこで気づいたのは、ステップの実行には「ステップイン」と「ステップオーバー」の2つがあること。ステップインはJavaScriptの命令を1行ずつ忠実に実行すること。外部で定義されている関数があれば、その関数に入って1行ずつ実行する。ステップオーバーも基本は同じだが、外部で定義されている関数は1行のJavaScriptとして扱い、その関数の中には入っていかない。なお、FireBug1.5.3の日本語では「スッテプオーバー」となっているが・・・。

最初はステップインしか知らなかったため、prototype.jsの中に入ってしまってトレースやりづらかったが、ステップオーバーの存在を知ったら超簡単。今までalertやconsole.logしか使わなかった自分がバカみたい。ツールは活用することに意味があるのだな~、と心から思った。

なお、FireBugを使ってPHPの変数を確認できる方法もあるみたいだから、ひと段落したら試してみよう。

0 件のコメント:

コメントを投稿