내 페이지에 링크가 있다고 가정 해 봅시다.
<a href="#" id="foo">Click Here</a>다른 것을 모르지만 링크를 클릭 alert("bar")하면가 표시됩니다. 그래서 어딘가에 일부 코드가 바인딩되고 있음을 알고 #foo있습니다.
alert("bar")클릭 이벤트에 바인딩하는 코드를 어떻게 찾을 수 있습니까? Chrome 솔루션을 찾고 있습니다.
추신 :이 예제는 허구이므로 "XXXXXX를 사용하고"alert (\ "bar \") "에 대한 전체 프로젝트를 검색하십시오. 진정한 디버깅 / 추적 솔루션을 원합니다.
답변:
Chrome 사용 15.0.865.0 dev . 요소 패널에는 "이벤트 리스너"섹션이 있습니다.
스크립트 패널의 "이벤트 리스너 중단 점" 호출 스택을 주시하면서 마우스-> 클릭 중단 점을 클릭 한 다음 "다음 함수 호출 단계"를 사용하여 이벤트를 처리하는 사용자 기능이 무엇인지 확인하십시오. 당신이하지 않도록 이상적으로, 당신은 unminified 하나 jQuery를의 축소 된 버전을 대체 할 것 단계 의 시간 모든 및 사용 을 통해 단계 때 가능.
{ }js를 볼 때 왼쪽 하단 의 기호를 톡톡 치십시오 . 마법.
Chrome 관리자를 사용하여 다음과 같이 다른 방법으로 첨부 된 이벤트를 찾을 수도 있습니다.
다음 이미지와 같이 Paul Irish가 설명하는대로 핸들러가 정의 된 위치로 이동합니다. https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
다음 단계에 따라 jQuery Audit 확장 프로그램 ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg )을 사용해보십시오 .
(2020 년 현재) Chrome 버전 83.0.4103.61 :
검사하려는 요소를 선택하십시오.
이벤트 리스너 탭을 선택하십시오.
jquery 함수 대신 실제 자바 스크립트 파일을 표시하려면 프레임 워크 리스너를 확인하십시오.
편집 : 내 대답 대신에 이것은 훌륭합니다 .Firebug (또는 유사한 도구)로 JavaScript / jQuery 이벤트 바인딩을 디버깅하는 방법
Chrome 개발자 도구에는 스크립트 섹션에 내장 된 검색 기능이 있습니다.
이 도구에 익숙하지 않은 경우 : (만약)
#ID를 빠르게 검색하면 결국 바인딩 기능으로 이동해야합니다.
예 : 검색 #foo하면
$('#foo').click(function(){ alert('bar'); })
2018 업데이트-향후 독자에게 도움이 될 수 있습니다.
이것이 Chrome에서 처음 도입 된시기가 확실하지 않습니다. 그러나 Chrome에서 지금 할 수있는 또 다른 쉬운 방법은 콘솔 명령을 사용하는 것입니다.
예를 들면 다음과 같습니다. ( chrome console type )
getEventListeners($0)반면 $ 0 는 DOM에서 선택된 요소입니다.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
findEventHandlers는 jquery 플러그인이며 원시 코드는 다음과 같습니다. https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
단계
원시 코드를 크롬 콘솔에 직접 붙여 넣습니다 (참고 : jquery가 이미로드되어 있어야 함)
다음 함수 호출을 사용하여 findEventHandlers(eventType, selector);
해당 선택기에서 지정한 요소의 eventType 핸들러를 찾으십시오.
예 :
findEventHandlers("click", "#clickThis");그런 다음 사용 가능한 이벤트 핸들러에 다음이 표시됩니다. 핸들러를 찾으려면 확장하여 함수를 마우스 오른쪽 단추로 클릭하고 선택하십시오. show function definition
참조 : https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/