経験知ロゴ

addEventListenerで追加したリスナーをChromeのDevToolで確認する方法

addEventListener

JavaScriptのaddEventListenerで登録した関数をChromeのDevToolを使って確認する方法を紹介します。

DevToolでEvent Listenerを確認

WindowsならCtrol + Shift + i

MacならCommand + Option + i

でDevToolを開く。

「Elements」をクリックし、「>>」をクリック。
Elementsをクリック

「Event Listeners」をクリック。
Event Listenersをクリック

この「Event Listeners」は、ウィンドウの幅によっては「>>」を押さなくても「Styles」や「Computed」と並んで表示されている場合があるので、そのときはそのままクリック。

また、レイアウトによっては、右側に表示されているエリアが下に配置されている場合があるので、見当たらない場合は下も見てください。

Event Listenerをクリックするとイベントの一覧が表示されるので、イベントをクリックするとそのイベントに登録されている関数を確認できます。
event一覧

画面操作で新しいイベントが追加された場合、自動で更新されないので、上にある更新ボタンを押せば最新の状態になります。
更新ボタン

おわりに

addEventListenerで登録した関数を一覧で確認できるのは便利ですね。

役に立ったらこの記事のシェアをお願いします

ブログのフォロー・RSS購読は下記ボタンから