Chrome을 사용하여 요소에 바인딩된 이벤트를 찾는 방법

Chrome을 사용하여 요소에 바인딩된 이벤트를 찾는 방법

내 페이지에 링크가 있다고 가정합니다.

<a href="#" id="foo">Click Here</a>

다른 건 몰라도 링크를 클릭하면alert("bar")가 표시됩니다.그래서 어딘가에서 어떤 코드가#foo.

다음 코드를 바인딩하는 코드를 어떻게 찾을 수 있습니까?alert("bar")클릭 이벤트?크롬으로 해결책을 찾고 있습니다.

Ps.: 이 예는 허구이므로 "XXXXXXX를 사용하고 전체 프로젝트에서 "경보(\"bar\")"를 검색하십시오."와 같은 솔루션을 찾고 있지 않습니다.저는 진짜 디버깅/추적 솔루션을 원합니다.

Chrome 15.0.865.0 dev 사용.Elements 패널에 "Event Listener" 섹션이 있습니다.

그리고 Scripts 패널에 "Event Listener Breakpoints"가 표시됩니다.마우스 -> 중단점을 클릭한 다음 "다음 함수 호출로 이동"하면서 콜 스택을 주시하면 이벤트를 처리하는 사용자 및 기능이 무엇인지 확인할 수 있습니다.jQuery의 미니화된 버전을 미니화되지 않은 버전으로 교체하여 항상 개입할 필요가 없도록 하고, 가능한 경우 단계를 다시 사용하는 것이 이상적입니다.

Chrome의 검사기를 사용하여 다음과 같은 다른 방법으로 첨부된 이벤트를 찾을 수도 있습니다.

1. 검사할 요소를 마우스 오른쪽 단추로 클릭하거나 'Elements' 창에서 찾습니다.
2. 그런 다음 '이벤트 청취자' 탭/창에서 이벤트를 확장합니다(예: '클릭').
3. 다양한 하위 노드를 확장하여 원하는 하위 노드를 찾은 다음 '핸들러' 하위 노드가 있는 위치를 찾습니다.
4. '함수'라는 단어를 마우스 오른쪽 단추로 클릭한 다음 '함수 정의 표시'를 클릭합니다.

https://groups.google.com/forum/ #!topic/google-chrome-developer-tools/NTCIS15uigA에 의해 설명된 대로 핸들러가 정의된 위치로 이동합니다.

설치 후 jQuery Audit 확장(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg), 을 시도해 보십시오.

1. 요소 점검
2. 새 'jQuery Audit' 탭에서 Events 속성 확장
3. 필요한 이벤트를 선택합니다.
4. 핸들러 속성에서 기능을 마우스 오른쪽 버튼으로 클릭하고 '기능 정의 표시'를 선택합니다.
5. 이제 이벤트 바인딩 코드가 표시됩니다.
6. 코드를 보다 쉽게 읽을 수 있도록 하려면 '예쁜 인쇄' 버튼을 클릭합니다.

(2022년 최신 기준) Chrome Version 99 버전의 경우:

1. 검사할 요소를 선택합니다.

2. Event Listener(Event Listener 탭

3. jquery 기능 대신 실제 javascript 파일을 보여주기 위해 Framework 청취자를 확인해야 합니다.

2018 업데이트 - 향후 독자에게 도움이 될 수 있습니다.

이것이 크롬에 언제 처음 도입되었는지는 잘 모르겠습니다.그러나 Chrome에서 이 작업을 수행할 수 있는 또 다른 (쉬운) 방법은 콘솔 명령을 사용하는 것입니다.

예: (크롬 콘솔 유형의 경우)

getEventListeners($0)

반면, $0은 DOM에서 선택된 요소입니다.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

편집: 제 대답 대신에, 이건 꽤 훌륭합니다.Firebug(또는 유사한 도구)를 사용하여 JavaScript/jQuery 이벤트 바인딩을 디버깅하는 방법

Google Chromes 개발자 도구는 스크립트 섹션에 검색 기능이 내장되어 있습니다.

이 도구가 익숙하지 않은 경우: (혹시 모르니)

• 페이지의 아무 곳이나 마우스 오른쪽 단추로 클릭(크롬)
• 요소 검사'를 클릭합니다.
• 스크립트' 탭을 클릭합니다.
• 오른쪽 상단에 있는 검색 표시줄

#ID를 빠르게 검색하면 바인딩 기능으로 이동할 수 있습니다.

: Ex : #foo당신을 에 데려다 줄 것입니다.

$('#foo').click(function(){ alert('bar'); })

findEventHandlers는 jquery 플러그인이며 원시 코드는 여기에 있습니다: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

스텝스

1. 원시 코드를 Chrome의 콘솔에 직접 붙여 넣습니다(참고: jquery가 이미 로드되어 있어야 함)

2. 다음 함수 호출을 사용합니다.findEventHandlers(eventType, selector);
   해당 선택기 지정 요소의 eventType 처리기를 찾습니다.

예:

findEventHandlers("click", "#clickThis");

그런 다음 사용 가능한 이벤트 핸들러가 아래에 표시되며 핸들러를 찾기 위해 확장해야 합니다. 이 기능을 마우스 오른쪽 버튼으로 클릭하고 선택합니다.show function definition

참조: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

Chrome 버전 52.0.2743.116의 경우:

1. Chrome의 Developer Tools(개발자 도구)에서 'Search(검색)' 패널을 클릭합니다.Ctrl+Shift+F.

2. 찾으려는 요소의 이름을 입력합니다.

바인딩된 요소에 대한 결과가 패널에 나타나고 해당 요소가 위치한 파일을 명시해야 합니다.

언급URL : https://stackoverflow.com/questions/7338193/using-chrome-how-to-find-to-which-events-are-bound-to-an-element