NightlyのFirefoxではDOM要素にどんなjQueryイベントが紐付いているか見ることができる!

jQueryを利用した画面をデバッグしてて「あれ、このDOM要素、ちゃんとイベントが紐付いてないのかな? どうなのかな?」なんてこと、あると思うのですが、これがインスペクタでひと目で確認できたらどんなに便利なことかと常々思っておりました。FirefoxのNightlyでは、ついに開発者ツールでこの機能がついたようです!

紐付いているイベントが分かる! コードも分かる!

イベントが紐付いているDOM要素の右側に「EV」というボタンが表示されます。これをクリックすると下の画像のように紐付いているイベントの一覧を見ることができます。

Remotty_-_リモートワークのためのバーチャルオフィス 2

さらにそのイベントをクリックすると、コードを見ることができます。minifyしてないローカルの開発環境であれば綺麗なJSを確認することができます。

Remotty_-_リモートワークのためのバーチャルオフィス

これはかなり開発効率上がる感じがしますねー! FirefoxのNightlyビルドはこちらからダウンロードすることができます。ぜひ手元でも動かしてみてください。

Firefox Nightly