프론트 엔드 개발자로서 JS 코드를 디버그 해야 하는 경우가 종종 있으며 HTML 요소에 바인딩된 이벤트 핸들러를 찾아야 하는 경우가 있습니다. 

이 게시물에서는 HTML 요소에 바인딩 된 클릭 이벤트 핸들러를 찾는 방법을 보여 드리겠습니다. 이는 다른 이벤트에도 적용됩니다.

요즘 웹 응용 프로그램은 일반적으로 매우 복잡하며 JS 코드가 많기 때문에 특히 JS 소스 코드가 난독화 되거나 압축된 경우 어떤 클릭 이벤트 핸들러가 HTML 요소에 바인딩 되었는지 파악하기 어렵습니다.

https://www.pixelstech.net/article/1566095480-How-to-use-Chome-dev-tool-to-find-event-handler-bound-to-an-element 

Chrome을 사용하면 이러한 종류의 바인딩을 쉽게 찾을 수 있습니다. Chrome 개발 도구의 3 가지 구성 요소를 사용할 수 있습니다.

• 소스 탭
• 이벤트 리스너 중단 점 패널
• 콜 스택 패널

이를 보여주는 예를 들어보십시오.

1. 웹 사이트를 열고 사용자가 클릭하여 게시 할 수 있는 요소가 있습니다. 여기에 바인딩 된 클릭 이벤트 핸들러를 찾으십시오.

2. F12 키를 누르거나 요소를 마우스 오른쪽 단추로 클릭하고 Inspect를 선택하여 Chrome 개발 도구를 열고 소스 탭으로 전환하십시오.

3. 오른쪽에는 이벤트 리스너 중단 점 패널이 있으며 마우스를 찾아 확장 한 후 클릭하십시오.

4. Call Stack 탭으로 이동하면 비어 있습니다.

5. 웹 페이지에서 요소를 클릭하면 Call Stack이 채워집니다.

6. 강조 표시된 영역에서 위의 Step Into 아이콘 (세번째 아이콘)을 클릭하거나 F11 키를 눌러 계속 클릭하면 클릭 이벤트 핸들러가 바인딩되어 있습니다.