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

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.

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

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.

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.

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/

Konsola programisty WebKit (dostępna w Chrome, Safari itp.) Umożliwia przeglądanie dołączonych zdarzeń dla elementów.

Więcej szczegółów w tym pytaniu Przepełnienie stosu

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

dawny:

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

Zgodnie z sugestią współpracownika, console.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 a console.log($("a#somefoo").data("events"))powinno zawierać listę zdarzeń dołączonych do tego elementu.

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 ()

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.

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.

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:

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.

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.

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

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.

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