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

jQuery를 사용하여 상당히 복잡하고 지저분한 DOM 조작 을 수행하는 웹 응용 프로그램을 디버깅해야합니다 . 한 시점에서 특정 요소에 바인딩 된 일부 이벤트는 시작되지 않고 단순히 작동을 중지합니다.

애플리케이션 소스를 편집 할 수있는 능력이 있다면, 많은 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!') }"
  })

요소에 첨부 된 모든 이벤트 를 표시 할 수있는 Visual Event 라는 멋진 책갈피 가 있습니다. 다양한 유형의 이벤트 (마우스, 키보드 등)에 대해 색상으로 구분 된 하이라이트가 있습니다. 그 위에 마우스를 올려 놓으면 이벤트 핸들러 본문, 첨부 방법 및 파일 / 라인 번호 (WebKit 및 Opera)가 표시됩니다. 이벤트를 수동으로 트리거 할 수도 있습니다.

어떤 이벤트 핸들러가 요소에 첨부되어 있는지 찾아 볼 수있는 표준 방법이 없기 때문에 모든 이벤트를 찾을 수는 없지만 jQuery, Prototype, MooTools, YUI 등과 같은 인기있는 라이브러리에서 작동합니다.

FireQuery를 사용할 수 있습니다 . Firebug의 HTML 탭에서 DOM 요소에 연결된 모든 이벤트를 보여줍니다. 또한를 통해 요소에 연결된 모든 데이터를 보여줍니다 $.data.

주어진 요소 / 이벤트에 대한 모든 이벤트 핸들러를 나열 할 수있는 플러그인은 다음과 같습니다.

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, '\n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

다음과 같이 사용하십시오.

// List all onclick handlers of all anchor elements:
$('a').listHandlers('onclick', console.info);

// List all handlers for all events of all elements:
$('*').listHandlers('*', console.info);

// Write a custom output function:
$('#whatever').listHandlers('click',function(element,data){
    $('body').prepend('<br />' + element.nodeName + ': <br /><pre>' + data + '<\/pre>');
});

Src : (내 블로그)-> http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

WebKit 개발자 콘솔 (Chrome, Safari 등에서 제공)을 사용하면 요소에 첨부 된 이벤트를 볼 수 있습니다.

이 스택 오버플로 질문에 대한 자세한 내용

$._data(htmlElement, "events")jquery 1.7 이상에서 사용 ;

전의:

$._data(document, "events") 또는 $._data($('.class_name').get(0), "events")

동료가 제안한대로 console.log> 경고 :

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

jQuery는 다음에 이벤트를 저장합니다.

$("a#somefoo").data("events")

를 수행하면 console.log($("a#somefoo").data("events"))해당 요소에 연결된 이벤트가 나열됩니다.

최신 Chrome (v29)에서 DevTools를 사용하면 다음 두 가지 팁이 이벤트 디버깅에 매우 유용합니다.

1. 마지막으로 선택한 DOM 요소 의 jQuery 이벤트 나열

   • 페이지에서 요소 검사
   • 콘솔에 다음을 입력하십시오.

     $ ._ data ( $ 0 , "events") // jQuery 1.7 이상 가정

   • 관련된 모든 jQuery 이벤트 객체를 나열하고 관심있는 이벤트를 확장 한 다음 "handler"속성의 기능을 마우스 오른쪽 버튼으로 클릭하고 "함수 정의 표시"를 선택합니다. 지정된 함수가 포함 된 파일이 열립니다.

2. 활용 monitorEvents을 () 명령

FireBug 승무원이 EventBug 확장 프로그램을 작업중인 것 같습니다. FireBug-Events에 다른 패널을 추가합니다.

"이벤트 패널은 페이지에서 이벤트 유형별로 그룹화 된 모든 이벤트 핸들러를 나열합니다. 각 이벤트 유형마다 리스너가 바인딩 된 요소 및 함수 소스의 요약을 열 수 있습니다." EventBug Rising

그들이 언제 발표 될지는 말할 수 없지만.

크롬 저장소에서 jQuery 디버거 도 찾았습니다 . dom 아이템을 클릭하면 콜백 함수와 함께 바운드 된 모든 이벤트가 표시됩니다. 이벤트가 제대로 제거되지 않은 응용 프로그램을 디버깅하고 있었고 몇 분 안에 추적 할 수있었습니다. 분명히 이것은 파이어 폭스가 아니라 크롬을위한 것입니다.

ev 요소 옆에있는 아이콘

Firefox 개발자 도구의 관리자 패널에는 요소에 바인딩 된 모든 이벤트가 나열됩니다.

먼저 Ctrl+ Shift+가 있는 요소를 선택하십시오 ( C예 : 스택 오버 플로우의 상향 화살표).

ev요소 오른쪽의 아이콘을 클릭 하면 대화 상자가 열립니다.

일시 정지 표시를 클릭하십시오 ||원하는 이벤트 하면 핸들러 라인에서 디버거가 열립니다.

이제 줄의 왼쪽 여백을 클릭하여 디버거에서 평소와 같이 중단 점을 배치 할 수 있습니다.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners에 언급되어 있습니다.

불행히도, 이것을 prettyfication과 함께 잘 재생할 수있는 방법을 찾을 수 없었습니다. 축소 / Firefox에서 Javascript와 CSS를 아름답게하는 방법 은 축소 된 줄에서 열리는 것 같습니다 .

Firefox 42에서 테스트되었습니다.

이 스레드 에 따르면 Firebug에는 DOM 요소의 리스너에 연결된 이벤트를 볼 수있는 방법이 없습니다.

tj111이 제안한 것 또는 HTML 뷰어에서 요소를 마우스 오른쪽 단추로 클릭하고 "로그 이벤트"를 클릭하여 특정 DOM 요소에 대해 어떤 이벤트가 발생하는지 확인할 수 있습니다. 어떤 이벤트 가 특정 기능을 발생 시킬 수 있는지 알기 위해 그렇게 할 수 있다고 생각 합니다.

버전 2.0 Firebug에서는 HTML 패널 에서 현재 선택된 요소의 모든 이벤트를 나열 하는 이벤트 패널이 도입되었습니다 .

또한 이벤트 패널의 옵션 메뉴 를 통해 도달 할 수있는 랩핑 된 청취자 표시 옵션 이 선택된 경우 jQuery 이벤트 바인딩으로 랩핑 된 이벤트 리스너를 표시 할 수 있습니다 .

해당 패널에서 이벤트 핸들러를 디버그하기위한 워크 플로우는 다음과 같습니다.

1. 디버깅하려는 이벤트 리스너가있는 요소를 선택하십시오.
2. 내부 이벤트 측면 패널 관련 이벤트에서 기능을 마우스 오른쪽 버튼으로 클릭하고 중단 점 설정을
3. 이벤트를 트리거

=> 스크립트 실행은 이벤트 처리기 함수의 첫 번째 줄에서 중지되며이를 단계별로 디버깅 할 수 있습니다.

Firebug 2 는 이제 DOM 이벤트 디버깅 / 검사를 통합합니다.