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!') }"
  })
  

---

요소에 첨부 된 모든 이벤트 를 표시 할 수있는 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> 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, "events") //assuming jQuery 1.7+

   • It will list all jQuery event objects associated with it, expand the interested event, right-click on the function of the "handler" property and choose "Show function definition". It will open the file containing the specified function.

2. Utilizing the monitorEvents() command

---

Looks like FireBug crew is working on an EventBug extension. It will add another panel to FireBug - Events.

"The events panel will list all of the event handlers on the page grouped by event type. For each event type you can open up to see the elements the listeners are bound to and summary of the function source." EventBug Rising

Although they cannot say right now when it will be released.

---

I also found jQuery Debugger in the chrome store. You can click on a dom item and it will show all events bound to it along with the callback function. I was debugging an application where events weren't being removed properly and this helped me track it down in minutes. Obviously this is for chrome though, not firefox.

---

ev icon next to elements

Within the Firefox Developer Tools' Inspector panel lists all events bound to an element.

First select an element with Ctrl + Shift + C, e.g. Stack Overflow's upvote arrow.

Click on the ev icon to the right of the element, and a dialogue opens:

Click on the pause sign || symbol for the event you want, and this opens the debugger on the line of the handler.

You can now place a breakpoint there as usual in the debugger, by clicking on the left margin of the line.

This is mentioned at: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Unfortunately, I couldn't find a way for this to play nicely with prettyfication, it just seems to open at the minified line: How to beautify Javascript and CSS in Firefox / Firebug?

Tested on Firefox 42.

---

According to this thread, there is no way in Firebug to view what events are attached to listeners on a DOM element.

It looks like the best you can do is either what tj111 suggests, or you could right-click the element in the HTML viewer, and click "Log Events" so you can see which events are firing for a particular DOM element. I suppose one could do that to see what events could be firing off particular functions.

---

With version 2.0 Firebug introduced an Events panel, which lists all events for the element currently selected within the HTML panel.

It can also display event listeners wrapped into jQuery event bindings in case the option Show Wrapped Listeners is checked, which you can reach via the Events panel's options menu.

With that panel the workflow to debug an event handler is as follows:

1. Select the element with the event listener you want to debug
2. Inside the Events side panel right-click the function under the related event and choose Set Breakpoint
3. Trigger the event

=> The script execution will stop at the first line of the event handler function and you can step debug it.

---

Firebug 2 does now incorporate DOM events debugging / inspection.

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