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는 핸들러를 내부에 저장합니다)를 참조해 주세요.

• 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, 프로토타입, MoTools, 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 Developer Console(Chrome, Safari 등에 있음)을 사용하여 요소에 대한 첨부된 이벤트를 볼 수 있습니다.

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

사용하다$._data(htmlElement, "events")jquery 1.7 이상,

예:

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

동료의 제안대로 console.log > alert:

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, "이벤트") //jQuery 1.7+를 전제로 합니다.

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

2. monitorEvents() 명령어 사용

FireBug 크루가 EventBug 확장 작업을 하고 있는 것 같습니다.FireBug - Events에 다른 패널이 추가됩니다.

"이벤트 패널에는 이벤트 유형별로 그룹화된 페이지에 모든 이벤트 핸들러가 나열됩니다.각 이벤트 유형에 대해 열어서 청취자가 바인딩된 요소와 함수 소스의 요약을 볼 수 있습니다."이벤트 버그 발생

언제 출시될지는 아직 알 수 없지만요.

크롬 스토어에서 jQuery Debugger도 찾았습니다.돔 항목을 클릭하면 콜백 함수와 함께 돔 항목에 바인딩된 모든 이벤트가 표시됩니다.이벤트가 제대로 제거되지 않은 응용 프로그램을 디버깅하고 있었는데 몇 분 만에 이를 추적할 수 있었습니다.확실히 이건 크롬용이지 파이어폭스가 아니에요.

ev요소 옆에 있는 아이콘

Firefox Developer Tools의 Inspector 패널에는 요소에 바인딩된 모든 이벤트가 나열됩니다.

먼저 + + 요소를 선택합니다(예: 스택 오버플로의 위쪽 화살표).

를 클릭합니다.ev요소 오른쪽에 아이콘이 표시되고 대화상자가 열립니다.

기호를 .||원하는 이벤트에 대한 기호, 그러면 핸들러의 행에 디버거가 열립니다.

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

자세한 내용은 https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners 를 참조해 주세요.

아쉽게도 이 기능을 예쁘게 사용할 수 있는 방법을 찾을 수 없었습니다.최소화된 라인으로 오픈하는 것 같습니다.Firefox/Firebug에서 Javascript와 CSS를 아름답게 하는 방법

Firefox 42에서 테스트.

이 스레드에 따르면 Firebug에서는 DOM 요소의 리스너에 연결된 이벤트를 표시할 수 없습니다.

tj111이 제안하는 것이 최선인 것 같습니다.또한 HTML 뷰어에서 요소를 우클릭하여 [이벤트 로그(Log Events)]를 클릭하면 특정 DOM 요소에 대해 어떤 이벤트가 발생하는지 알 수 있습니다.어떤 이벤트가 특정 기능을 발생시킬 수 있는지 확인하기 위해 그렇게 할 수 있을 것 같습니다.

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

또한 [Show Wraped Listeners]옵션이 선택되어 있는 경우 jQuery 이벤트바인딩으로 둘러싸인 이벤트청취자를 표시할 수 있습니다.이 옵션은 [Events]패널의 [Options]메뉴를 통해 접근할 수 있습니다.

이 패널에서 이벤트핸들러를 디버깅하는 워크플로우는 다음과 같습니다.

1. 디버깅할 이벤트청취자가 있는 요소를 선택합니다.
2. 이벤트 사이드 패널 내에서 관련 이벤트 아래의 함수를 마우스 오른쪽 버튼으로 클릭하고 중단점 설정을 선택합니다.
3. 이벤트를 트리거하다

=> 이벤트 핸들러 함수의 첫 번째 줄에서 스크립트 실행이 중지되고 디버깅 단계를 수행할 수 있습니다.

Firebug 2에는 DOM 이벤트의 디버깅/검사가 포함되어 있습니다.

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