シンス株式会社の川原です。
普段JavaScriptやjQueryを使用している時に、「今プログラムがどのような動きをしているのか」「変数のなかには何が入っているか」などが気になることはありませんか？
例えば自作の関数で分岐が思うようにいかなかったり、動作中にthisを利用した場合にどこを指定してるか知りたかったり、JavaScriptの動きを細かく確認する必要がある時、私がよく使うのはFirefoxのプラグインFirebugです。
今回はFirebugを利用したJavaScriptのデバッグ方法を紹介しようと思います。
Firebugを利用することで条件分岐がなぜ思うように動かないのか原因を探ったり、変数の中身を調べたり、thisの指定要素などがわかるようになります！
Firebugの有効化
まずFirefoxアドオンからFirebugをインストールして使えるようにします。
右クリックすると”Firebugで要素を調査”の項目が増えてFirebugが使えるようになりました。
早速使ってみると次のようなウィンドウが開きます。
ここでは通常の開発者ツール同様にHTMLやCSSを見たり、編集してリアルタイムに表示の変更を確認することも可能です。
今回はデバッグを行うのでスクリプトタブを開きます。
デバッグ方法
前の画像の左行にあるナンバーに注目してください。
緑色になっているところがブレークポイントを持たせることができる場所となります。
ブレークポイントとはその場所で処理を一時中断させる箇所のことです。条件分岐前に変数の中身を知りたい時などによく使います。
今回は11行目にブレークポイントを置きたいので、緑色に表示された行数の部分をクリックします。
このように赤色の丸がつきました。これでブレークポイントの設定は完了です。
ブレークポイントは1つだけではなく、緑色表示になっている行ならばいくつでも設定が可能です。
デバッグ前に今回のスクリプトの大まかな流れを説明します。
- ボタンを押下
- onclickイベントでalert_buttonを実行
- 画面にアラート表示
という流れになります。
ではデバッグをしてみましょう。Firefoxに表示されたボタンを押下してみます。
Firebugのなかを確認してみましょう。
ブレークポイントの行が黄色に表示され、赤丸の上に黄色の三角が表示されています。
今、この行で処理が止まっている状態です。
画面右側ウォッチにも注目してください。
この時点でthisが何を指しているか、そしてfunctionには何の関数が実行されているか 、引数には何が入っているかが確認できます。
この状態で処理がストップしているので、処理を次に進ませます。
画面中央の矢印アイコンで操作することが出来ます。
左から
- コンティニュー（次のブレークポイントまで処理を進めます、ない場合は処理を最後まで終わらせます。）
- ステップイン（1行ずつ実行しながら進めます、外部の関数に差し掛かるとその中に入って1行ずつ処理を進めます。）
- ステップオーバー（1行ずつ実行しながら進めますが、外部の関数やメソッドは中に入らず処理だけ行います。）
- ステップアウト（関数内部から呼び出し元に戻る際に使います。今見ている関数の処理は実行します。）
基本的にはステップオーバーで進めていき、計算などの処理を詳しく見たい場合はステップインしていくのがデバックしやすいと思います。
ステップオーバーすると最終的に何の関数が実行されたかが表示されます。
以上、FirebugでJavaScriptのデバッグする方法でした。
console.logを使っても変数の中身を見ることは出来ますが、関数の流れは掴みにくいです。
「ifの条件分岐が上手くいかない」という時や「jQueryがどのような流れで動いているかがわからない」などの時に、動作の流れを調べるのにとても便利なツールです。ぜひ使ってみてください！
※ jQueryの$(document).ready()や、JavaScriptのwindow.onloadなど、画面を読み込んだ時の動作について調べる場合は、ブレークポイントを設定したのちに一度リロードする必要があります。
スマホ・タブレットにも対応したホームページの制作ならシンス株式会社まで。
