JavaScriptのデバッグ方法
Chromeの検証ツールを使っての検証手順
ブラウザで検証ツールを開き、下記の[Sources]をクリック
↓
下記のようにデバッグしたいファイルを選択する
↓
下記の行番号をクリックすると青色に変わるので、そこがデバッグのブレークポイントになる。
↓
ブラウザをリロードすると先程設定した青色の行で処理が止まる。
↓
処理を進めるのに以下のいずれかのタブをクリックする
上記の青色になっている矢印のようなタブから順に左から(A),(B),(C),(D),(E)とする。
(A):処理の再開／停止を行うタブで、処理の停止中にクリックすると、次のブレークポイントまでの処理を進める。次のブレークポイントがない場合は通常の状態に戻る。
(B):ステップオーバーという。現在の行を実行し次の行に進む。もし現在の行に関数呼び出しがあっても関数の処理を行わず、次の行に進む。(次の行に進むだけで、その行が実行されるわけではない。)
(C):ステップインという。現在の行を実行し次の行に進む。もし現在の行に関数の呼び出しがあった場合は、その関数の内部に処理が進む。
(D):ステップアウトという。現在の行が呼び出している関数が終了するまで実行し、関数を抜ける。
(E):ブレークポイントの有効無効を切り替える。
参考記事:
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
