デベロッパーツールのEvent Listener Breakpointsを使う

ChromeのデベロッパーツールのEvent Listener Breakpointsを使うとjavascriptのデバックのときに便利です。 例えば、画面上をクリックしたときに実行される関数をデバックしたいときには、Event Listener Breakpointsを使って画面上をクリックしてjavascriptが実行されるときに処理を追うことが出来ます。

まずChromeのデベロッパーツールをF12で開き、Sourcesのタブを開きます。 右側のメニューのEvent Listener Breakpointsを展開して、Mouseという項目があるのでこれを展開します。 clickの項目にチェックを入れることで、マウスクリック時に実行する関数をデバックすることが出来ます。

click以外にもloadやkeydownなど豊富にあるので、デバックの際に非常に役に立ちます。