엘리먼트에 등록되어 있는 이벤트 감지 Visual Event Tool

UI 개발을 하다 보면 어느 엘리먼트에 이벤트가 등록되어 있는지를 확인해 보고 싶을 때가 종종있다.

사실 이런 확인 기능을 크롬 개발자 툴에서 기본적으로 제공해 줄 것이라 생각했지만 그런 기능은 존재하지 않았다.

그러던 중 회사 동료로부터 크롬 확장 프로그램을 추천 받았다.

Visual Event

https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim?utm_source=chrome-app-launcher-info-dialog

해당 확장 프로그램을 설치하고 이벤트를 감지하고 싶은 페이지에서 Visual Event 확장 프로그램 아이콘을 누르면 다음과 같이 화면이 바뀐다.

빨간색 네모칸의 엘리먼트에 이벤트가 등록되어 있다는 것이고 마우스 커서를 위치해 보면 javascript 코드를 확인할 수 있다.