「FireBug」でJavaScript実行時の属性値を追跡する
JavaScriptで開発をしていると、
動いているのやら、いないのやら、よくわからない状況に陥って、途方にくれてしまうことがありました。
ついさっきのコーディングでも、そんなワナに簡単に引っかかってしまうへっぽこプログラマーな私。
でも、「FireBug」のデバッグ機能に一筋の光明を見出しました。
というのが昨日までの話。今日は、「FireBug」で実際のデバッグしてみました。
「FireBug」の利用の仕方はいたって簡単です。
(1)開発中のサイトのhtmlファイルをFirefox開きます。
(2)tool > Firebug で、Disable FireBugのチェックをはずします。
(3)Firefoxの場面下半分にソースコードが表示されます。
Scriptを読み込んでいる場合には、そのスクリプトにもアクセスすることができます。
今回は、Scriptの実行中にHTML要素の属性が変わっていく様子を「FireBug」で追跡して、
思ったとおりの動作になっているかどうかをチェックしてみました。
今回のプログラムは、「WEB+DB PRESS Vol.35」の「特集2 Ajaxの定石」で紹介されていたコードを参考に実装しました。
コーディングの中身は、エフェクト効果(ムーブ、スケール、フェード)を実装するというものです。
完全な実装では、なかったのでJavaScript超初心者の私には、まさに手探り状態の開発になりました。
参考にしたコードには、エフェクトをかける対象を登録して実際に動かすという部分がありませんでした。
そこで、button要素にエフェクトをかけてみることにしました。
まず、最初にはまったのは、
スクリプトすると、属性値は変化するものの、button要素にダイナミックな変化が見られない。
という状態です。
問題は、button要素に定義されていない属性を指定していたためでした（ＴＴ）。
button要素に「style.left」なんてやってました。
そこで、「style.width」と「style.height」属性を変更することにしました。こちらの属性はありました(笑）。
ですが、思ったように、動いてくれません。
ここでやっと「FireBug」登場。button要素の属性を追跡してみました。
Scriptを実行して、停止させると、実行から停止までの間にbutton要素の属性「style.width」と「style.height」がどのように変化したか表示してくれます。
たしかに、予想した値と違う値が指定されていました。
問題は、サンプルコードにバグがあったこと(TT)。
self.○○となるはずの箇所が、this.○○となっていました。
修正後、実行してみると、きちんと動きました。
今回の開発では、「FireBug」の機能をあまり活かせてないじゃないかと思われるかもしれません。
(実際そうなんですが・・・)属性の値を簡単に追跡してくれるのは、非常に助かります。
変化の仕方で、間違いにあたりをつけられます。
さらにブレークポイントを追加する機能を使うと、間違いを見つけやすくなるとおもいます。
今回、実装したしたエフェクトの実行例をこちらに用意しました。
やっていること自体はたいしたことはありません。
「FireBug」でどのように属性を追加できるか確認するのに利用してください。
また、「effect.js」ファイルは、エフェクトを実装するためのスケルトンクラスとして非常に参考になると思います。
