DevToolsで要素に設定されたイベントを調べる

chromeのDevToolsを使って、特定の要素に設定されているイベントを調べる方法をメモ。

サンプルコード

例として、リンクと2ファイルのscriptの読み込みを追加します。

<a class="sample" href="https://www.google.com">Google</a>

<script src="./script.js"></script>
<script src="./after-script.js"></script>

それぞれのjsファイルにイベントを用意します。
まずはscript.jsです。

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOMContentLoaded');
});

document.querySelector('.sample').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('click');
});

次にafter-script.jsです。

document.querySelector('.sample').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('override click');
});

これで動作テストを行う準備ができました。
イベント設定のデモページ

では実際にDevToolsでリンクに設定されたイベントを調べてみます。
DevToolsでElementsタブを開いてから調べたい要素を選び、右側のEvent Listenersを選択します。

clickの項目を選択すると、先ほど設定した2つのイベントを確認できました。

Ancestorsにチェックを入れると、祖先要素も含まれるようになります。

各イベントの横にあるゴミ箱のアイコンをクリックすることで、そのイベントを削除できます。
試しに、clickの中にあるscript.jsのイベントのゴミ箱アイコンをクリックしてみます。

該当のイベントが削除されました。
実際にクリックイベントを試してみても、script.jsのconsoleは表示されなくなっています。

何らかの外部処理が干渉してうまく動作しない時など、一部処理を一時的に削除したい場合に便利です。