이 addEventListener 움직이고 있을까? 그렇게 생각했을 때 JavaScript의 디버거를 보자.

이 addEventListener 는 움직이고 있는 것일까?

자바스크립트를 작성한 적이 있다면 누구나 한 번 생각한 적이 있다고 생각합니다 (아마).
나는 적용되는지 모르는 때 확인을 위해 잘 내부에 console.log() 등을 쓰고 수동으로 디버깅했습니다.

그러나 다음 방법을 사용하면 addEventLisner가 적용되는지 즉시 알 수 있습니다.

자바스크립트 디버거 사용

Chrome의 Developer Tool의 Event Listeners 기능을 사용하여 해결합니다.

예를 들어 다음과 같은 코드를 작성한 경우 click 이벤트를 열어 보겠습니다.

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

코멘트

CSS를 쓸 때 기본적으로 열려 있는 탭의 Style 기능을 사용한 적이 있는 사람은 많을지도 모릅니다.
하지만 의외로 그 옆에 있는 Event Listener 의 탭을 열었던 적이 있는 사람은 적은 것은 아닐까? 라고 생각하고 이 짧은 기사를 썼습니다.