Firebug 또는 유사한 도구를 사용하여 JavaScript / jQuery 이벤트 바인딩을 디버깅하는 방법

질문 : Firebug 또는 유사한 도구를 사용하여 JavaScript / jQuery 이벤트 바인딩을 디버깅하는 방법은 무엇입니까?

---

상당히 복잡하고 복잡한 DOM 조작을 수행하기 위해 jQuery를 사용하는 웹 애플리케이션을 디버깅해야합니다. 어느 시점에서 특정 요소에 바인딩 된 일부 이벤트가 실행되지 않고 단순히 작동을 중지합니다.

응용 프로그램 소스를 편집 할 수있는 기능이 있다면 Firebug console.log() 문을 드릴 다운하고 추가하고 문제를 정확히 찾아 내기 위해 코드를 주석 / 주석 해제합니다. 그러나 애플리케이션 코드를 편집 할 수없고 Firebug 또는 유사한 도구를 사용하여 Firefox에서 완전히 작업해야한다고 가정 해 보겠습니다.

Firebug는 내가 DOM을 탐색하고 조작 할 수 있도록하는 데 매우 능숙합니다. 그러나 지금까지 Firebug로 이벤트 디버깅을 수행하는 방법을 알아낼 수 없었습니다. 특히 특정 시간에 특정 요소에 바인딩 된 이벤트 처리기 목록을보고 싶습니다 (Firebug JavaScript 중단 점을 사용하여 변경 사항을 추적). 그러나 Firebug에는 바인딩 된 이벤트를 볼 수있는 기능이 없거나 너무 바보 같아서 찾을 수 없습니다. :-)

제안이나 아이디어가 있습니까? 이상적으로는 오늘날 DOM을 편집하는 방법과 유사하게 요소에 바인딩 된 이벤트를보고 편집하고 싶습니다.

답변

---

DOM 노드에서 이벤트 리스너를 찾는 방법을 참조하십시오.

간단히 말해서, 어떤 시점에서 이벤트 핸들러가 요소에 연결되어 있다고 가정합니다 (예 : $('#foo').click(function() { console.log('clicked!') });

다음과 같이 검사합니다.

• jQuery 1.3.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, value) {
    console.log(value) // prints "function() { console.log('clicked!') }"
  })

• jQuery 1.4.x

  var clickEvents = $('#foo').data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
  })

 

 

jQuery.fn.data (jQuery가 내부적으로 핸들러를 저장하는 위치)를 참조하십시오.

• jQuery 1.8.x

  var clickEvents = $._data($('#foo')[0], "events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // prints "function() { console.log('clicked!') }"
  })

 

출처 : https://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tools