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

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

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

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

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

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

    ブレークポイントがセットされると、矢印マークが表示される。
    Firefoxデバッガー:ブレークポイントを貼った後につく矢印マーク

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

  3. 操作によりコードが実行され、ブレークポイントに到達すると処理がストップする。
    Firefoxデバッガー:ブレークポイントで処理が停止したところ

  4. あとは右側パネル上部にあるアイコンでステップ実行する。
    Firefoxデバッガー:ステップ実行操作ボタン

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

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。
ベンチャー企業の営業、大手企業のSEを経て、独立。
ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です