はじめに
あるシステムの開発中に既存のjavascriptコードの動きが理解できず苦しんでいました。console.logで変数の中身を確認していましたが、うーん...という感じでした。そこで、javascriptのデバッグ機能を調査した結果、debuggerの存在を知り実際に使ってみたら理解が進んだので、debuggerについてまとめていこうと思います。
debuggerとは何か
こちらより抜粋します。
debugger 文は、ブレークポイントの設定などの任意の利用可能なデバッグ機能を呼び出します
debuggerの用途
私がどのように使ったかというと、debuggerを散らしてどこのコードが呼ばれているのか確認したり、debuggerで処理を止めて各変数の値を確認したりしました。debuggerで確認することで、自分が理解できていなかった処理の流れを確認することができ、既存のjavascirptコードの理解が進みました。
debuggerで処理を止めれない件
debuggerを記載すると、chromeの開発者ツールを開いた状態でブラウザ操作することでdebuggerが呼ばれた時点で処理が止まるのですが、ある時処理が止まらず？？？となりました。開発者ツールを確認すると、丁度debuggerが呼ばれていたファイルに対してデバッグできないような設定が入っていました。その設定を解除したら無事処理が止まりました。（画像がなくて申し訳ございません...）
おわりに
debuggerを使用することで既存コードの理解に繋がりました。まだまだ使いこなせていないため、色々探りを入れていこうと思います。また、debugger以外のデバッグ方法についても調べていけたらと思います。誤り等ありましたらご指摘いただけると助かります。
参考