スポンサード リンク

Firebugを使って変数の値を変更する方法。

Ajax のプログラムをデバッグする時に、JavaScriptプログラム中に書いた値とは違う値で動作確認してみたいことがあります。

例えばユーザーがブラウザのテキストボックスから、予想外の数値や文字列を入力したと仮定して、プログラムが正常に動くかテストしたいなど。

もちろんプログラムを書き換えてもいいのですが、一時的な場合はなるべくプログラムは変更したくありません。そんなときには Firebug が便利です。

Firebug にはプログラムの実行中に、変数の値を変更できる便利な機能があります。この機能を使うと、動作確認がとてもやり易くなります。

操作も簡単なので早速使ってみましょう。


【1】Firefox を起動します。

ajax-97.gif


【2】作成済みの「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-98.gif

Firefox の画面をみると、「a + b = 3」になっています。これは JavaScript のプログラムの中で、変数に値を代入して計算しているからです。

var a = 1;
var b = 2;
var c = a + b;

計算結果は文字列として画面に出力しています。
result.innerHTML = "a + b = " + c;


次はプログラムの実行中に、変数の値を変えてみましょう。


【3】Firebug を起動します。

ajax-71.gif

*「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。


【4】Firebug で行番号12をクリックして、ブレークポイントを設定します。

ajax-90.gif


【5】Firefox のツールバーにある「再読み込み」ボタンをクリックします。

ajax-99.gif


【6】行番号12のブレークポイントでプログラムが一時停止しました。監視にある変数 a、b の値を確認してください。

ajax-91.gif

*行番号12はまだ実行されていないので、変数 c は undefined です。


【7】変数 a の行をマウスで右クリックし、「変数を編集」をクリックします。

ajax-92.gif


【8】変数を編集できるようになったら、値に「3」と入力し「Enterキー」を押して確定してください。

ajax-93.gif


【9】変数 a の値が「3」に変わりました。

ajax-94.gif


【10】再開ボタンをクリックして、プログラムを最後まで実行します。

ajax-95.gif


【11】Firefox の画面をみると、「a + b = 5」になりました。

ajax-96.gif


【12】ブレークポイントを設定して、変数の値をいろいろ変えてみてください。


このように Firebug を使うと、JavaScriptのプログラムを実行中に、変数の値を確認したり、変更することが自由自在にできるのでとても便利です。


スポンサード リンク






Ajax初心者入門講座TOPへ