例えばユーザーがブラウザのテキストボックスから、予想外の数値や文字列を入力したと仮定して、プログラムが正常に動くかテストしたいなど。
もちろんプログラムを書き換えてもいいのですが、一時的な場合はなるべくプログラムは変更したくありません。そんなときには Firebug が便利です。
Firebug にはプログラムの実行中に、変数の値を変更できる便利な機能があります。この機能を使うと、動作確認がとてもやり易くなります。
操作も簡単なので早速使ってみましょう。
【1】Firefox を起動します。
【2】作成済みの「test.html」を開きます。
＊「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html
Firefox の画面をみると、「a + b = 3」になっています。これは JavaScript のプログラムの中で、変数に値を代入して計算しているからです。
var a = 1;
var b = 2;
var c = a + b;
計算結果は文字列として画面に出力しています。
result.innerHTML = "a + b = " + c;
次はプログラムの実行中に、変数の値を変えてみましょう。
【3】Firebug を起動します。
＊「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。
【4】Firebug で行番号12をクリックして、ブレークポイントを設定します。
【5】Firefox のツールバーにある「再読み込み」ボタンをクリックします。
【6】行番号12のブレークポイントでプログラムが一時停止しました。監視にある変数 a、b の値を確認してください。
＊行番号12はまだ実行されていないので、変数 c は undefined です。
【7】変数 a の行をマウスで右クリックし、「変数を編集」をクリックします。
【8】変数を編集できるようになったら、値に「3」と入力し「Enterキー」を押して確定してください。
【9】変数 a の値が「3」に変わりました。
【10】再開ボタンをクリックして、プログラムを最後まで実行します。
【11】Firefox の画面をみると、「a + b = 5」になりました。
【12】ブレークポイントを設定して、変数の値をいろいろ変えてみてください。
このように Firebug を使うと、JavaScriptのプログラムを実行中に、変数の値を確認したり、変更することが自由自在にできるのでとても便利です。
