【JS】JavaScriptをステップ実行してデバッグする（Firefox）

JavaScriptをステップ実行しながらデバッグする方法。

個人的に一番使いやすいFirefoxの開発ツールでのやり方。

Firefox 開発ツールでのJavaScriptステップ実行手順

Firefoxメニューの「ウェブ開発」→「デバッガー」を選択。


1. まず、ステップ実行を開始したい位置にブレークポイントをセットする。
   セット方法は、下記のようにコード左にある行数をクリックする。
   

   ブレークポイントがセットされると、矢印マークが表示される。
   

2. 次に、ページから、ブレークポイントをセットしたコードが実行される操作を行う。
   （例．ボタン押下、画像ファイル読込など）

3. 操作によりコードが実行され、ブレークポイントに到達すると処理がストップする。
   

4. あとは右側パネル上部にあるアイコンでステップ実行する。
   

使い方も簡単だし、ちゃんと変数の値やDOM操作の内容がリアルタイムで表示されるので、JavaScriptの動作確認はFirefox一択。