このaddEventListener動いているんだろうか？ そう思った時にはJavaScriptのデバッガを見ましょう

この addEventListener は動いているんだろうか？

JavaScriptを書いたことがある人なら誰でも一回は思ったことがあると思います（多分）。
私は適用されているか分からない時には確認のために、よく内部に console.log() などを書いて手動でデバッグしていました。

しかし以下の方法を使えば addEventLisner が適用されているかはすぐに知ることができます。

JavaScript のデバッガを使いましょう

Chrome の Developer Tool の Event Listeners の機能を使うと解決します。

例えば以下のようなコードを書いたのなら、clickイベントを開いてみましょう。

    const element = document.querySelector('.js-pagetop-link');
    element.addEventListener('click', () => {
      // do something 
    });

コメント

CSSを書く時にデフォルトで開いているタブのStyleの機能を使ったことがある人は多いかもしれません。
しかし、案外その横にあるEvent Listenerのタブを開いたことがある人は少ないのでは？ と思ってこの短い記事を書きました。