Jak debugować powiązania zdarzeń JavaScript / jQuery za pomocą Firebug lub podobnych narzędzi?

Istnieje ładny bookmarklet o nazwie Visual Event , który może pokazać wszystkie zdarzenia dołączone do elementu. Posiada kolorowe podświetlenia dla różnych typów zdarzeń (mysz, klawiatura itp.). Po najechaniu na nie kursorem wyświetla treść procedury obsługi zdarzenia, sposób jej dołączania oraz numer pliku / linii (w WebKit i operze). Zdarzenie można również wywołać ręcznie.

Nie może znaleźć każdego zdarzenia, ponieważ nie ma standardowego sposobu, aby sprawdzić, do czego są dołączone procedury obsługi zdarzeń element, ale współpracuje z popularnymi bibliotekami, takimi jak jQuery, Prototype, MooTools, YUI itp.

Rozszerzenie Eventbug zostało wydane wczoraj, zobacz: http://www.softwareishard.com/blog/firebug/eventbug-alpha-released/

Możesz użyć FireQuery . Pokazuje wszystkie zdarzenia dołączone do elementów DOM w zakładce HTML Firebug. Pokazuje również wszelkie dane dołączone do elementów poprzez $.data.

Oto wtyczka, która może wyświetlić listę wszystkich procesów obsługi zdarzeń dla danego elementu / eventu:

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

Użyj go tak:

// 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: (mój blog) - > http://james.padolsey.com/javascript/debug-jquery-events-with-listhandlers/

Konsola programisty WebKit (znaleziona w Chrome, Safari itp.) pozwala przeglądać dołączone zdarzenia dla elementów.

Więcej szczegółów w tym pytaniu o przepełnienie stosu

Użyj $._data(htmlElement, "events") w jquery 1.7+;

Ex:

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

Jak zasugerował kolega, konsola.log > alert:

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

JQuery przechowuje zdarzenia w następujący sposób:

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

Wykonanie console.log($("a#somefoo").data("events")) powinno wyświetlić listę zdarzeń dołączonych do tego elementu.

Używając DevTools w najnowszym Chrome (v29) uważam te dwie wskazówki za bardzo pomocne przy debugowaniu zdarzeń:

1. Wyświetlanie zdarzeń jQuery z ostatnio wybranego elementu DOM

   • Sprawdź element na stronie
   • wpisz następujący tekst w konsoli:

     $._data = ($0, "zdarzenia") / / zakładając jQuery 1.7 +

   • wyświetli wszystkie obiekty zdarzenia jQuery z nim związane, rozwinie interesujące Zdarzenie, kliknij prawym przyciskiem myszy na funkcji właściwości "handler" i wybrać "Pokaż definicję funkcji". Otworzy plik zawierający określoną funkcję.

2. Wykorzystanie polecenia monitorEvents ()

Wygląda na to, że ekipa FireBug pracuje nad rozszerzeniem EventBug. Doda kolejny panel do Firebug-Events.

" panel zdarzenia wyświetli listę wszystkich procedur obsługi zdarzeń w zakładce pogrupowanych według typu zdarzenia. Dla każdego typu zdarzenia można otworzyć, aby zobaczyć elementy, do których są powiązane detektory oraz podsumowanie źródła funkcji."EventBug Rising

Chociaż nie mogą teraz powiedzieć, kiedy zostanie wydany.

Znalazłem również jQuery Debugger w chrome store. Możesz kliknąć na element dom i pokaże wszystkie zdarzenia związane z nim wraz z funkcją callback. Debugowałem aplikację, w której zdarzenia nie były usuwane prawidłowo, a to pomogło mi wyśledzić ją w ciągu kilku minut. Oczywiście jest to jednak dla chrome, a nie firefox.

ev ikona obok elementów

W panelu Narzędzia programistyczne Firefoksa Inspektor wyświetla wszystkie zdarzenia związane z elementem.

Najpierw wybierz element za pomocą Ctrl + Shift + C , np. strzałka upvote Stack Overflow.

Kliknij ikonę ev po prawej stronie elementu, a otworzy się okno dialogowe:

Kliknij na symbol pauzy {[2] } Dla wydarzenia, które chcesz, a to otworzy debugger na linii obsługi.

Możesz teraz umieścić tam punkt przerwania, jak zwykle w debugerze, klikając lewy margines linii.

To jest wymienione na: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Niestety, nie mogłem znaleźć sposobu na to, aby to ładnie grało z ładnym, po prostu wydaje się otwierać w minifigurce: Jak upiększyć Javascript i CSS w Firefoksie / Firebug?

Testowane na Firefoksie 42.

Zgodnie z Ten wątek, w Firebug nie ma możliwości sprawdzenia, jakie zdarzenia są dołączone do listenerów w elemencie DOM.

Wygląda na to, że najlepsze, co możesz zrobić, to albo to, co sugeruje tj111, albo możesz kliknąć prawym przyciskiem myszy element w przeglądarce HTML i kliknąć "Zaloguj zdarzenia", aby zobaczyć, które zdarzenia uruchamiają się dla danego elementu DOM. Przypuszczam, że można to zrobić, aby zobaczyć, jakie zdarzenia mogłyby odpalić poszczególne funkcje.

W wersji 2.0 Firebug wprowadził Panel Events , który wyświetla wszystkie zdarzenia dla elementu aktualnie wybranego w HTML panel .

Może również wyświetlać słuchacze zdarzeń zawinięte w powiązania zdarzeń jQuery w przypadku, gdy zaznaczona jest opcja Pokaż słuchacze zawinięte, do której można dotrzeć poprzez Zdarzenia menu opcji panelu .

Z tym panelem przepływ pracy do debugowania zdarzenia obsługa jest następująca:

1. wybierz element z detektorem zdarzeń, który chcesz debugować
2. wewnątrz panelu bocznego Zdarzenia Kliknij prawym przyciskiem myszy funkcję pod powiązanym zdarzeniem i wybierz Ustaw punkt przerwania
3. Uruchom Zdarzenie

= > wykonywanie skryptu zatrzyma się w pierwszej linii funkcji obsługi zdarzeń i możesz ją debugować.

Firebug 2 zawiera teraz debugowanie / inspekcję zdarzeń DOM.