プログラムの誤りをバグ(bug 小さな虫)といい、バグを探して取り除く作業をデバッグといいます。またデバッグを支援するソフトをデバッガといいます。
Firebug は高機能な JavaScript デバッガを備えているので、プログラムを一時停止したり、1行ずつ進めたり、変数の値を確認することができます。
プログラムは人間が作るものですから、必ずバグが入り込みます。作ったプログラムが1回目で動くことはほとんどありません。プログラムが上手く動かないときは焦らずに、デバッガを使い原因を見つけて、一つずつ解決していきましょう。
今回は動作確認済みのプログラムを使いますのでエラーは出ません。とりあえず Firebug の使い方に慣れることに専念してください。
・Firefox をインストールしていない方は、「Step3・Firefoxをインストールする」をご覧ください。
・Firebug をインストールしていない方は、「Step4・Firebugをインストールする」をご覧ください。
【1】Firefox を起動します。
【2】作成済みの「test.html」を開きます。
C:\ajax\sample001\test.html
＊Firefox での開き方は、前回の「Step3・Firefoxで動作確認する」を参考にしてください。
【3】Firebug を起動します。使いやすい方法でかまいません。
・キーボードの「F12キー」を押すと、Firebug がブラウザの下部に表示されます。
・「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。
【4】Firebug の文字の大きさは、メニューから「表示 → 文字サイズ」で変更できます。
【5】「test.js」が開いていることを確認してください。
Web アプリケーションは多くのファイルで構成されます。JavaScriptも複数使うことが普通ですので、ここで目的のファイルを選択します。
これで準備が整いました。あとはプログラムが動く操作をします。例えばページを再読み込みしたり、クリックしたりといったイベントを発生させます。どのようなイベントが必要かは書いたプログラムによって変わります。
test.jsはページが読み込まれた時に、関数を呼び出すようになっています。
onload = init;
【6】Firefox のツールバーにある「再読み込み」ボタンをクリックしてみます。
しかし特に変わったことは起こりません。Firebug を起動するだけでは、デバックしたりモニタすることができないからです。
【7】JavaScriptプログラムの行番号5をクリックします。
【8】赤い点が表示され、ブレークポイントが設定されました。
ブレークポイントとは、プログラムの動作を確認するために一時停止させる場所のことです。
＊赤い点をクリックすると、ブレークポイントを解除できます。
【9】もう一度 Firefox のツールバーにある「再読み込み」ボタンをクリックします。
【10】今度は行番号5のブレークポイントでプログラムが一時停止しました。
＊行番号5が黄色く反転していますが、この行はまだ実行されていない点に注意してください。
【11】監視に表示されている this の左にある「＋」をクリックします。
【12】監視に一覧が表示されました。変数 result はまだ undefined です。
＊undefined 不明確な
【13】Firebug の「ステップイン」ボタンをクリックします。
＊または「F11キー」でも同じ。
【14】プログラムが1行進みました。変数 result に値がセットされています。
＊行番号6はまだ実行されていません。
【15】「ステップイン」ボタンを押して、プログラムを行番号10まで進めてください。
監視にある変数a、b、cはまだ undefined です。行番号10はまだ実行されていません。
＊ステップインは関数の中に入ります。
【16】プログラムを行番号11に進めると、変数aに値が代入されました。
【17】プログラムを行番号13まで進めると、変数b、cにも値が代入されました。
【18】プログラム上の変数に、マウスのカーソルを重ねても変数の中身を確認できます。
【19】プログラムを進めて、関数calc()を抜けると、行番号6に戻ります。
この時 innerHTML にマウスのカーソルを重ねると、画面に表示する文字列が代入されていることがわかります。
【20】プログラムを最後まで進めてください。
【21】同じ要領で、2回目は「ステップオーバー」ボタンをクリックしてプログラムを進めてみてください。「再読み込み」ボタンを忘れずに。
＊または「F10キー」でも同じ。
ステップインとの違いがわかりましたか？
ステップオーバーの場合は呼び出す関数の中には入りません。関数の動きが大体掴めている場合や、フレームワークなど動作が確認されている関数は、細かい動きを追わなくていいのでステップオーバーが便利です。
【22】「ステップアウト」ボタンは関数から抜け出す(呼び出し元に戻る)時に使います。
【23】「再開」ボタンは、次のブレークポイントまで一気に進めます。ブレークポイントを複数設定して動作を確認してください。
＊または「F8キー」でも同じ。
【解説】
デバッグに使うボタンの働きをまとめると以下のようになります。上手く使い分けてください。
・ステップイン プログラムを1行進める(関数の中に入る)
・ステップオーバー プログラムを1行進める(関数の中に入らない)
・ステップアウト 関数から抜け出す(呼び出し元に戻る)
・再開 次のブレークポイントまで進む
【ワンポイント】
Firebug はHTMLやCSSも表示できます。
