JavaScript에서 발생한 이벤트를 확인하는 방법
웹 개발을 하다 보면 특정 요소에서 어떤 JavaScript 이벤트가 실제로 발생하는지 확인해야 할 때가 있습니다. 이 글에서는 구글 크롬(Google Chrome) 브라우저의 개발자 도구를 활용해 발생한 이벤트를 추적하는 방법을 단계별로 소개합니다.
1. 개발자 도구(DevTools) 열기
구글 크롬을 실행한 후 F12 키를 눌러 개발자 도구(Dev Tools)를 엽니다. 페이지에서 마우스 오른쪽 버튼을 클릭한 뒤 '검사'를 선택해도 동일하게 열 수 있습니다.
2. Sources 탭으로 이동
개발자 도구 상단 메뉴에서 Sources(소스) 탭을 클릭합니다.
3. Event Listener Breakpoints 찾기
화면 오른쪽 패널에서 Event Listener Breakpoints(이벤트 리스너 중단점) 항목을 찾아 확장합니다.
4. 이벤트 선택 후 대상 요소와 상호작용
추적하고 싶은 이벤트 유형(예: Mouse, Keyboard, Control 등)에 체크한 뒤, 페이지에서 해당 대상 요소와 직접 상호작용해 봅니다.
5. 디버거에서 중단점 확인
선택한 이벤트가 실제로 발생하면 디버거가 자동으로 멈추면서 중단점이 잡힙니다. 이를 통해 어떤 이벤트가 언제, 어디서 실행되는지 정확하게 파악할 수 있으며, 이벤트 핸들러 코드의 문제를 분석할 때도 매우 유용합니다.