FireFoxのFirebugでJavaScriptの値を確認する方法

firefox

JavaScriptをデバッグするため、alertを入れて値を確認したことありませんでしたか?
HTMLやJavaScriptが苦手なバックエンドエンジニアのあるあるかもしれません。

[スポンサーリンク]

昔はわたしも同じことをやっていました。(泣
Firebugを使えば、ソースに手をいれることなくJavaScriptの値を確認することが出来ます。
こっちの方がスマートですよね。

今回は、Firebugを使ったデバッグ方法の第一弾として、JavaScriptの値を確認する方法を紹介していきます。

このページでやること

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

サンプルページ

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

JavaScriptをデバッグする。

それではさっそく、上記のURLをFireFoxのFirebugでデバッグして値を確認していきましょう。
Firebugのインストール方法については省略します。

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

firebug-javascript-value-1

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

firebug-javascript-value-2

続いて値を確認したい部分付近へブレークポイントをつけます。
行番号部分をクリックすると、ブレークポイントがつきます。

firebug-javascript-value-3

ブレークポイントをつけたら、HTML画面内のボタンをクリックしてJavaScriptを実行しましょう。
サンプルを使うと、本来であればアラートダイアログが表示されますが、その前のブレークポイント部分で処理が一旦止まってアラートダイアログは表示されません。

firebug-javascript-value-4

ブレークポイントをつけてるところでとまるので、変数にマウスカーソルをあてると変数の中味を確認することができます。
サンプルでは、countという変数にマウスカーソルをあてて、変数の中味を表示しています。

firebug-javascript-value-5

さいごに

これでalert()とももうおさらばですね。
フロントエンドエンジニアと違って、バックエンドエンジニアはUI関連のツールに疎いことが多いです。
私もその一人です。。(泣

FirebugはJavaScriptの変数確認以外にも、値を上書きしたり色々と便利なこともできます。
このあたりについては、また別ページで紹介していきます。
それでは!