Google 크롬의 개발자 도구로 이벤트를 쉽게 디버깅했습니다.

소개

결론에서 말하면,
jQuery로 설정된 클릭 이벤트 등을 정의하는 위치를 확인하는 방법
Google Chrome의 Developer Tool에서 쉽게 볼 수 있습니다

아마도 Google 크롬 47.0.2526.80에서 증가한 기능입니다.
우선 최신 버전을 도입하면 기능 추가되고 있을 것이다.

실제로 디버깅 해보십시오.

검증 사이트

요소 검증

이것을 클릭하면 어떤 일이 일어날 것인가 ...?
그렇다면 먼저 마우스 오른쪽 버튼을 클릭하거나 바로 가기를 사용하여 요소를 확인하십시오.

이번은 예로서 Create new user 라고 하는 버튼을 클릭했을 때의 처리를 봅니다.



요소를 확인한 후 오른쪽에 Event Listeners라는 탭이 있으므로 선택합니다.Ancestors 라든지 Framework listeners 라는 옵션이 있을까 생각합니다.

그래, Framework listeners 에 체크가 들어가 있으면 jQuery 등으로 이벤트 청취자를 정의했을 경우에서도, 원래의 소스까지 쫓아가게 되어 있습니다.



체크하면 modal-form.html:109 가 있네요.

이것을 클릭하면,,,



키타━━━━(ﾟ∀ﾟ)━━━━!!

        $( "#create-user" ).button().on( "click", function() {
            dialog.dialog( "open" );
        });