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

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

---

내 페이지에 링크가 있다고 가정 해 봅시다.

<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 관리자를 사용하여 다음과 같이 다른 방법으로 첨부 된 이벤트를 찾을 수도 있습니다.

1. 검사 할 요소를 마우스 오른쪽 버튼으로 클릭하거나 '요소'창에서 찾으십시오.
2. 그런 다음 '이벤트 리스너'탭 / 창에서 이벤트를 펼치십시오 (예 : '클릭')
3. 다양한 하위 노드를 확장하여 원하는 노드를 찾은 다음 'handler'하위 노드의 위치를 ​​찾으십시오.
4. '기능'이라는 단어를 마우스 오른쪽 단추로 클릭 한 다음 '기능 정의 표시'를 클릭하십시오.

다음 이미지와 같이 Paul Irish가 설명하는대로 핸들러가 정의 된 위치로 이동합니다. 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. Click on the 'Pretty print' button for a more readable view of the code

---

For version Chrome Version 71.0.3578.98 (Latest as of 2019):

1. Select the element you want to inspect

2. Choose the Event Listener tab

3. Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.

---

Edit: in lieu of my own answer, this one is quite excellent: How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

Google Chromes developer tools has a search function built into the scripts section

If you are unfamiliar with this tool: (just in case)

• right click anywhere on a page (in chrome)
• click 'Inspect Element'
• click the 'Scripts' tab
• Search bar in the top right

Doing a quick search for the #ID should take you to the binding function eventually.

Ex: searching for #foo would take you to

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

---

findEventHandlers is a jquery plugin, the raw code is here: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Steps

1. Paste the raw code directely into chrome's console(note:must have jquery loaded already)

2. Use the following function call: findEventHandlers(eventType, selector);
   to find the corresponding's selector specified element's eventType handler.

Example:

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

Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select show function definition

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

---

2018 Update - Might be helpful for future readers:

I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.

For example: (in chrome console type)

getEventListeners($0)

Whereas $0 is the selected element in the DOM.

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

---

For Chrome Version 52.0.2743.116:

1. In Chrome's Developer Tools, bring up the 'Search' panel by hitting Ctrl+Shift+F.

2. Type in the name of the element you're trying to find.

Results for binded elements should appear in the panel and state the file they're located in.

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