■JavaScriptのデバッグ■
■デバッグとは■
プログラマが人間である以上，作成されたプログラムには必ずどこかに間違いが潜んでいる．プログラムの間違いを探し出して修正する作業のことを，「デバッグ作業」と呼ぶ．これは，プログラムの間違いのことを，俗にバグ(虫)と呼ぶため，「虫の駆除」にたとえられたためである．
■デバッガなどツールの利用■
デバッグ作業を補助してくれるツールが，「デバッガ」と呼ぶプログラムである．あくまで作業の補助的なツールであるため，自動的にバグを探し出してはくれないが，デバッグ作業の効率を高めてくれる．
■ツールによる文法のチェック■
■JavaScriptコンソールの使い方■
Firefoxの初期状態では，本格的なデバッガは導入されていないが，JavaScriptやスタイルシート(css)の文法ミスをチェックするための「JavaScriptコンソール」は使用できる．
JavaScriptコンソールは次のように使用する．
- デバッグ対象のページを読み込む(直接ローカルファイルを開いてもよい)
- 「ツール(T)」→「JavaScriptコンソール(C)」
- 開いたコンソールの右端の「すべて」をクリックして表示
- 表示された書くエラーの下に表示されているURLをクリックすると該当箇所 を表示できる
■デバッガによる動作のデバッグ■
■JavaScript用デバッガFireBugの導入■
JavaScriptコンソールで表示されるのは，文法ミスなどの形式的な誤りだけである．文法ミスをすべて修正して何もエラーが表示されなくなったとしても，バグがないことを示すものではない．プログラムのバグには，文法が正しくても，書かれた内容が間違っている(記述された動作が違っている)ことがほとんどである．デバッグは，文法ミスの修正が終わってからが本番の作業でなる．
Firefox1.5以降では，JavaScript用のデバッガとしてFireBugと呼ばれるツールが拡張機能として提供されている．
インストール手順は，次の通り
- Firefoxを起動
- 次のサイトにアクセス
- そのページの真ん中あたりにある「Install Now(106KB)」をクリック
- 「署名がありません」といわれるが，しばらくまって一番下の「インストール」をクリック
- Firefoxを再起動
■FireBugの使い方■
FireBugは，Firefoxのウィンドウ右下隅にある小さなアイコンをクリックするか，「表示(V)」→「FireBug」を選択すると，ウィンドウの下半分に表示される．基本的な使い方は次の流れに従う
- 3つのタブのうち「Debugger」を選択
- 表示されたプログラムリストのうち，動作を確認したい場所の行番号をクリックして赤丸をつける．この赤丸は「ブレークポイント」を示す．
- 実行を開始する．ブレークポイントまで実行が進み，そこで実行が一時停止される．
- 左下のPause/lContinueボタンで実行の中断・再開を切り替える
- JavaScriptの実行に必要なら，自分で作成したボタンやフォームなども操作する
- そこで，左下のStepOver，StepInto，StepOut，ボタンを使って少しずつ実行を進める．
- StepOverボタン…一行分だけ実行する．もしも関数呼び出しの場合，その関数をまとめて実行して次の行へ．
- StepIntoボタン…一行分だけ実行する．もしも関数呼び出しの場合，その関数の中に入り，関数の中の一行目を実行する．
- StepOutボタン…今何か関数の中を実行している場合，その関数の最後まで実行を進める．
- 適宜変数の中身を調べて，問題ないかどうか確認する．
- 画面右下に，現在の変数の値が表示されている．
まず，プログラムの動きや変数の値がどのように変化していくのか，自分の頭の中で考えてみて，次のプログラムの動きをデバッガを使って一つ一つ確かめていく．自分の想像した通りに実行の進まない箇所，予想した変数の値と違う値に設定されている場所が，バグの場所である．その部分を修正して，すべての動作が，自分の想像通りになった時が，デバッグの終了であり，プログラムの完成となる．