Edited at

色々なbreakpointを使ったJSデバッグ

More than 5 years have passed since last update.

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のあちこちを一度クリックしてみると面白いです.