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

609

Potrzebuję debugować aplikację internetową, która korzysta z jQuery do wykonywania dość skomplikowanych i niechlujnych manipulacji DOM . W pewnym momencie niektóre zdarzenia powiązane z określonymi elementami nie są uruchamiane i po prostu przestają działać.

Gdybym miał możliwość edycji źródła aplikacji, przeszedłbym do szczegółów i dodałbym kilka instrukcji Firebug console.log() oraz komentował / komentował fragmenty kodu, aby spróbować zlokalizować problem. Załóżmy jednak, że nie mogę edytować kodu aplikacji i muszę działać całkowicie w przeglądarce Firefox za pomocą Firebug lub podobnych narzędzi.

Firebug bardzo dobrze pozwala mi nawigować i manipulować DOM. Jak dotąd jednak nie byłem w stanie dowiedzieć się, jak przeprowadzić debugowanie zdarzeń za pomocą Firebug. W szczególności chcę tylko zobaczyć listę procedur obsługi zdarzeń powiązanych z określonym elementem w danym momencie (używając punktów przerwania JavaScript Firebug do śledzenia zmian). Ale albo Firebug nie ma możliwości zobaczenia powiązanych zdarzeń, albo jestem zbyt głupi, by je znaleźć. :-)

Jakieś rekomendacje lub pomysły? Idealnie chciałbym po prostu zobaczyć i edytować zdarzenia powiązane z elementami, podobnie jak dzisiaj mogę edytować DOM.

Jaanus
źródło

Odpowiedzi:

355

Zobacz Jak znaleźć detektory zdarzeń w węźle DOM .

W skrócie, zakładając, że w pewnym momencie do Twojego elementu dołączona jest procedura obsługi zdarzeń (np.): $('#foo').click(function() { console.log('clicked!') });

Sprawdzasz to tak:

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

Zobacz jQuery.fn.data(gdzie jQuery przechowuje twój program obsługi wewnętrznie).

  • 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!') }"
    })
Półksiężyc Świeży
źródło
21
FYI: Nie będzie wyświetlać wydarzeń, które nie były związane z jQuery
Juan Mendes,
10
Całkowicie zgadzam się co do konsoli.log (), jednak należy ją zabezpieczyć if (window.console)na wypadek, gdyby została w kodzie (znacznie łatwiej to zrobić niż z alertem ()) i zepsuć IE.
thepeer
14
@ thepeer Osobiście wolę sprawdzić konsolę na początku pliku, a jeśli nie istnieje, stwórz atrapę obiektu.
Andrew
Poniżej znajduje się podobny fragment do debugowania wszystkich zdarzeń (przepraszam za brak formatowania):$('#foo').click(function(event) { var events = $(this).data('events'); $.each(events, function(event, handlers) { $.each(handlers, function(key, handlerObj) { console.log("--------------------------------------"); console.log(event+"["+key+"] | "+handlerObj.handler) ; }); });
Corey O.
3
@ BrainSlugs83: patrz połączona odpowiedź w tej odpowiedzi. (tl; dr: nie możesz).
Crescent Fresh
162

Jest miły bookmarklet o nazwie Visual Event, który pokazuje wszystkie zdarzenia dołączone do elementu. Posiada kolorowe podświetlenia dla różnych rodzajów zdarzeń (mysz, klawiatura itp.). Po najechaniu na nie myszą wyświetla się moduł obsługi zdarzenia, sposób jego dołączenia oraz numer pliku / linii (w WebKit i Operze). Możesz także uruchomić zdarzenie ręcznie.

Nie może znaleźć każdego zdarzenia, ponieważ nie ma standardowego sposobu sprawdzenia, które procedury obsługi zdarzeń są dołączone do elementu, ale działa z popularnymi bibliotekami, takimi jak jQuery, Prototype, MooTools, YUI itp.

Matthew Crumley
źródło
8
Zwróć uwagę, że ponieważ działa on w treści JavaScript, pobiera dane poprzez zapytania do bibliotek JavaScript. Będzie więc wyświetlać tylko zdarzenia dodane z obsługiwaną biblioteką (która obejmuje jQuery).
Matthew Flaschen
41

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

Shrikant Sharat
źródło
1
Ta wtyczka ma 1 naprawdę duży minus: kiedy debugujesz i chcesz sprawdzić wartość zmiennej zawierającej kolekcję jquery, nie jesteś w stanie sprawdzić wartości, gdy kod jest wstrzymany. To nie jest przyczyna z firebugiem. Powód, dla którego go odinstalowałem. sam
Maarten Kieft
1
FireQuery nie wydaje się już pokazywać dołączonych wydarzeń :(
Matty J
26

Oto wtyczka, która może wyświetlać wszystkie moduły obsługi zdarzeń dla dowolnego elementu / zdarzenia:

$.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 tego w ten sposób:

// 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/

James
źródło
11

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

dawny:

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

Tamás Pap
źródło
8

Zgodnie z sugestią współpracownika, console.log> alert:

var clickEvents = $('#foo').data("events").click;
jQuery.each(clickEvents, function(key, value) {
    console.log(value);
})
Flevour
źródło
6

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

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

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

Alex Heyd
źródło
5

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

  1. Wyświetlanie zdarzeń jQuery ostatniego wybranego elementu DOM

    • Sprawdź element na stronie
    • wpisz następujące polecenie w konsoli:

      $ ._ data ( 0 $ , „events”) // przy założeniu jQuery 1.7+

    • Wyświetli listę wszystkich powiązanych z nim obiektów zdarzeń jQuery, rozwinie zainteresowane zdarzenie, kliknij prawym przyciskiem myszy funkcję właściwości „handler” i wybierz „Pokaż definicję funkcji”. Otworzy plik zawierający określoną funkcję.

  2. Korzystanie z polecenia monitorEvents ()

mateuscb
źródło
4

Wygląda na to, że załoga FireBug pracuje nad rozszerzeniem EventBug. Doda to kolejny panel do FireBug - Wydarzenia.

„Panel zdarzeń zawiera listę wszystkich procedur obsługi zdarzeń na stronie pogrupowanych według typu zdarzenia. Dla każdego typu zdarzenia można otworzyć, aby zobaczyć elementy, z którymi nasłuchują, oraz podsumowanie źródła funkcji.” EventBug Rising

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

jayarjo
źródło
2
Ta funkcja została wydana i uwzględniona w FireBug 2.0.1. Teraz, gdy sprawdzasz element HTML na stronie, pojawia się nowy panel „Zdarzenia”, w którym możesz zobaczyć załączone zdarzenia i ich moduły obsługi.
derloopkat
4

Znalazłem też jQuery Debugger w sklepie chrome. Możesz kliknąć element dom, a zobaczysz wszystkie powiązane z nim zdarzenia wraz z funkcją wywołania zwrotnego. Debugowałem aplikację, w której zdarzenia nie były poprawnie usuwane, co pomogło mi ją wyśledzić w kilka minut. Oczywiście dotyczy to Chrome, a nie Firefoxa.

Obrabować
źródło
4

ev ikona obok elementów

W panelu Inspektora narzędzi deweloperskich Firefoksa wymieniono wszystkie zdarzenia powiązane z elementem.

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

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

etykietka wydarzeń

Kliknij ||symbol znaku pauzy dla wybranego zdarzenia, a to otworzy debugger w linii procedury obsługi.

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

Wspomniano o tym na stronie : https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Niestety nie udało mi się znaleźć sposobu na ładną grę z ładnym wyglądem, po prostu wydaje się, że otwiera się w minimalnej linii: Jak upiększyć Javascript i CSS w Firefox / Firebug?

Testowane na Firefox 42.

Ciro Santilli
źródło
Niestety nie działa to dobrze w przypadku lokalizowania odziedziczonych słuchaczy.
chukko
3

Zgodnie z tym wątkiem , Firebug nie ma sposobu, aby zobaczyć, jakie zdarzenia są dołączone do detektorów w elemencie DOM.

Wygląda na to, że najlepsze, co możesz zrobić, to to, co sugeruje tj111, lub możesz kliknąć prawym przyciskiem myszy element w przeglądarce HTML, a następnie kliknąć „Rejestruj zdarzenia”, aby zobaczyć, które zdarzenia uruchamiają dany element DOM. Przypuszczam, że można to zrobić, aby zobaczyć, jakie zdarzenia mogą odpalać poszczególne funkcje.

Dan Lew
źródło
2

W wersji 2.0 Firebug wprowadził panel Zdarzenia , który zawiera listę wszystkich zdarzeń dla elementu aktualnie wybranego w panelu HTML .

* Wydarzenia * panel boczny w Firebug

Może także wyświetlać detektory zdarzeń opakowane w powiązania zdarzeń jQuery w przypadku zaznaczenia opcji Pokaż opakowane detektory , do których można uzyskać dostęp poprzez menu opcji panelu Zdarzenia .

W tym panelu przepływ pracy w celu debugowania modułu obsługi zdarzeń jest następujący:

  1. Wybierz element z detektorem zdarzeń, który chcesz debugować
  2. W panelu bocznym Zdarzenia kliknij prawym przyciskiem myszy funkcję pod powiązanym zdarzeniem i wybierz Ustaw punkt przerwania
  3. Uruchom zdarzenie

=> Wykonanie skryptu zatrzyma się w pierwszym wierszu funkcji obsługi zdarzeń i można wykonać krok debugowania.

Sebastian Zartner
źródło