Google Chromeのとても優秀なDeveloper Tools，の中でもよく使うブレークポイントの機能について簡単に紹介します．単純なブレークポイント以外にもJS特有の機能があるのだけれど，あまり使っている人を見ることがないので…
この投稿を読んだ後にはconsole.logやalertでprintデバッグをすることはないでしょう．
色々なBreakponts
Developer Toolsのブレークポイントは，ソースコードの特定の行でbreakするという一般的なブレークポイント以外にもいくつかあります．上部写真の右側のメニュー参照
- Breakpoints
- 普通のbreakpoint
- DOM Breakpoints
- Developer ToolsのElementsタブでDOMを右クリック→Break on...にて指定．特定のDOMのサブツリーや属性が変更されたとき，また該当DOMが削除されたときなどを指定してbreakする
- XHR Breakpoints
- 指定した文字列を含むURLにリクエストが飛んだときにbreak．
- Event Listener Breakpoints
機能は名前とセクションを見た通りという感じです．
breakさせて何をするか
- 右のScope Variablesセクションからそのスコープにある変数の値チェック
- コンソールを開いてメソッド呼び出し
- 右上メニューからステップ実行して動きを見る
など．色々試してみてください．
おまけ
右下の歯車をクリックすると色々設定できます．ショートカットキー一覧が見られるのも便利．
まとめ
JSデバッグ時になんとなく適当にconsole(+単純なbreakpoints)だけ使っている人も多いと思いますが，Developer Toolsのあちこちを一度クリックしてみると面白いです．