내 페이지에 링크가 있다고 가정 해 봅시다.
<a href="#" id="foo">Click Here</a>다른 것을 모르지만 링크를 클릭 alert("bar")하면가 표시됩니다. 그래서 어딘가에 일부 코드가 바인딩되고 있음을 알고 #foo있습니다.
alert("bar")클릭 이벤트에 바인딩하는 코드를 어떻게 찾을 수 있습니까? Chrome 솔루션을 찾고 있습니다.
추신 :이 예제는 허구이므로 “XXXXXX를 사용하고”alert (\ “bar \”) “에 대한 전체 프로젝트를 검색하십시오. 진정한 디버깅 / 추적 솔루션을 원합니다.
답변
Chrome 사용 15.0.865.0 dev . 요소 패널에는 “이벤트 리스너”섹션이 있습니다.
스크립트 패널의 “이벤트 리스너 중단 점” 호출 스택을 주시하면서 마우스-> 클릭 중단 점을 클릭 한 다음 “다음 함수 호출 단계”를 사용하여 이벤트를 처리하는 사용자 기능이 무엇인지 확인하십시오. 당신이하지 않도록 이상적으로, 당신은 unminified 하나 jQuery를의 축소 된 버전을 대체 할 것 단계 의 시간 모든 및 사용 을 통해 단계 때 가능.
답변
Chrome 관리자를 사용하여 다음과 같이 다른 방법으로 첨부 된 이벤트를 찾을 수도 있습니다.
- 검사 할 요소를 마우스 오른쪽 버튼으로 클릭하거나 ‘요소’창에서 찾으십시오.
- 그런 다음 ‘이벤트 리스너’탭 / 창에서 이벤트를 펼치십시오 (예 : ‘클릭’)
- 다양한 하위 노드를 확장하여 원하는 노드를 찾은 다음 ‘handler’하위 노드의 위치를 찾으십시오.
- ‘기능’이라는 단어를 마우스 오른쪽 단추로 클릭 한 다음 ‘기능 정의 표시’를 클릭하십시오.
다음 이미지와 같이 Paul Irish가 설명하는대로 핸들러가 정의 된 위치로 이동합니다. https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA
답변
다음 단계에 따라 jQuery Audit 확장 프로그램 ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg )을 사용해보십시오 .
- 요소 검사
- 새로운 ‘ jQuery 감사 ‘탭에서 Events 속성을 확장하십시오.
- 필요한 이벤트를 선택하십시오
- 핸들러 속성에서 마우스 오른쪽 기능을 통해 클릭하고 ‘선택 표시 기능 정의를 ‘
- 이제 이벤트 바인딩 코드가 표시됩니다
- 더 읽기 쉬운 코드를 보려면 ‘ Pretty print ‘버튼을 클릭하십시오
답변
(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/
