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

JAVASCRIPT / 글쓴이

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);
})