FireFoxのFirebugでJavaScriptの変数を編集(変更)する方法

firefox

以前、Firebugを使ってJavaScriptの変数の値を確認する方法を紹介しました。
今回は一歩踏み込んで、JavaScriptの変数を編集(変更)する方法を紹介します。

[スポンサーリンク]

様々なプログラムでデバッガは用意されています。JavaScriptでも同様にデバッガを使うことができます。
使い方は、他のプログラムのデバッガと大差はないように思えます。

わたしはよくJavaをEclipseのデバッガを使ってデバッグしていますが、JavaScriptの変数を編集(変更)する方法と大差はないように感じました。

このページでやること

FirebugでJavaScriptの変数の値を編集(変更)する方法を紹介します。
(今回は、FireFoxを使って実践していきます。)

サンプルページ

今回Firebugを使う対象のサンプルページを用意しました。
demo

JavaScriptの変数を編集(変更)する。

上記のURLをFireFoxの開いて、Firebugでデバッグして値を編集していきましょう。
途中までの操作は、Firebugを使ってJavaScriptの変数の値を確認する方法と同じ手順です。(同じコンソール画面を使っていきます。)
Firebugのインストール方法については省略します。

まずは、FireFoxで上記のURLを開いて、Firebugを起動しましょう。

firebug-javascript-value-1

続いてスクリプトをクリックして、test.jsを選択します。
test.jsは今回のデバック対象のJavaScriptです。サンプル画面で使っているJavaScriptです。

firebug-javascript-value-2

編集した変数の行番号付近で右クリックして、式の入力ボックスを表示します。
firebug-javascript-value-update1

式の入力ボックスへ変数の値を上書くための式を入力します。
ここでは、変数countの値を10にするための式を入れています。
firebug-javascript-value-update2

画面上のボタンをクリックして、JavaScriptを実行してみましょう。
本来であれば、count = 10が表示されるはずですが、変数の値を編集しているため結果はcount = 19と表示されます。
firebug-javascript-value-update3

さいごに

わたしもよくやっていましたが、JavaScript中にテスト用のロジックを継ぎ足してデバッグするとリスクが大きいです。
リスクよりもあとでバレた時のなんともいえない恥ずかしさは味わいたくないものです。

なるべくなら、というよりは絶対にテスト用のロジックは入れないようにするクセをつけてデバッグをしていきましょう!
と自分自身にいつも言い聞かせております。。
それでは!