Jak wyświetlić zdarzenia uruchomione na elemencie w Chrome DevTools?

603

Mam konfigurowalny element formularza na stronie z biblioteki. Chcę zobaczyć, jakie zdarzenia JavaScriptu są uruchamiane podczas interakcji z nim, ponieważ próbuję dowiedzieć się, którego programu obsługi zdarzeń użyć.

Jak to zrobić za pomocą Chrome Web Developer?

John Hoffman
źródło
13
Ten bookmarklet może być pomocny: sprymedia.co.uk/article/Visual+Event+2
scytale
1
Odpowiedź tutaj jest cenna, ale tak naprawdę to bookmarklet powyżej ^ rozwiązał mój problem. sprymedia.co.uk/article/Visual+Event+2
Jazzy

Odpowiedzi:

877
  • Naciśnij, F12aby otworzyć Narzędzia deweloperskie
  • Kliknij kartę Źródła
  • Po prawej stronie przewiń w dół do „Punktów przerwania detektora zdarzeń” i rozwiń drzewo
  • Kliknij wydarzenia, których chcesz słuchać.
  • Wejdź w interakcję z elementem docelowym, jeśli wystrzelą, otrzymasz punkt przerwania w debuggerze

Podobnie możesz kliknąć element docelowy prawym przyciskiem myszy -> wybrać „element inspekcji” Przewiń w dół po prawej stronie ramki programisty, na dole znajdują się „detektory zdarzeń”. Rozwiń drzewo, aby zobaczyć, jakie zdarzenia są dołączone do elementu. Nie jestem pewien, czy to działa w przypadku zdarzeń obsługiwanych przez propagację (chyba nie)

Matt
źródło
11
to rozwiązanie jest problemem, jeśli chodzi o zdarzenia myszy, których szukasz, ponieważ punkt przerwania zabija przepływ
WendyG
67
co jeśli wszystkie zdarzenia wskazują na zminimalizowaną jquery, nie obchodzi mnie to, w jaki sposób mogę uzyskać dostęp do funkcji używającej tej jquery.
Muhammad Umer
14
Czy może pokazywać niestandardowe zdarzenia, które zostały utworzone przeze mnie? Kiedy przeczytałem, że to zmieniło życie, to była pierwsza rzecz, o której myślałem. Czy coś mi umknęło?
Tebe
24
@MuhammadUmer Możesz blackbox jQuery, aby Chrome pomijał go i przechodził bezpośrednio do kodu źródłowego. developer.chrome.com/devtools/docs/blackboxing
Matt Zeunert
1
@MuhammadUmer co zrobić, jeśli przestaniesz używać JQuery?
John Balvin Arias,
831

Możesz użyć funkcji monitorEvents .

Po prostu sprawdź swój element ( right mouse clickInspectna widocznym elemencie lub przejdź do Elementskarty w Narzędziach programisty Chrome i wybierz żądany element), a następnie przejdź do Consolekarty i napisz:

monitorEvents($0)

Teraz, gdy przesuniesz kursor myszy nad tym elementem, skupisz go lub klikniesz, nazwa uruchomionego zdarzenia zostanie wyświetlona z jego danymi.

Aby przestać otrzymywać te dane, po prostu napisz to na konsoli:

unmonitorEvents($0)

$0jest tylko ostatnim elementem DOM wybranym przez Chrome Developer Tools. Możesz przekazać tam dowolny inny obiekt DOM (na przykład wynik getElementByIdlub querySelector).

Możesz również określić „typ” zdarzenia jako drugi parametr, aby zawęzić monitorowane zdarzenia do określonego zestawu. Na przykład:

monitorEvents(document.body, 'mouse')

Lista dostępnych typów znajduje się tutaj .

Zrobiłem mały gif, który ilustruje działanie tej funkcji:

użycie funkcji monitorEvents

Mariusz Pawelski
źródło
2
Zgoda. Jest to domyślny sposób monitorowania i śledzenia zdarzeń dotyczących określonych elementów.
dmackerman
1
Ach tak, rozumiem. To było „niezdefiniowane”, które mnie zrzuciło, ale teraz widzę, że masz to samo w swoim pomocnym animowanym GIF-ie. Dzięki.
MSC,
1
którego narzędzia
użyłeś
3
@MariuszPawelski Jak kontynuować? Zrobiłem to i znalazłem zdarzenie kliknięcia, które było zainteresowaniem. Ale jak mogę znaleźć, co się stanie, kiedy kliknę element? Jaki kod zostanie wykonany? Której właściwości MouseEventpowinienem szukać?
Utku
3
ale gdzie znaleźć handler, np. handler kliknięć.
Szejk Abdul Wahid
26

Visual Event to miły, mały bookmarklet, którego można użyć do przeglądania procedur obsługi zdarzeń elementu. W wersji online można obejrzeć tutaj .

tifkin
źródło
22

W przypadku jQuery (przynajmniej wersja 1.11.2) działała dla mnie następująca procedura.

  1. Kliknij element prawym przyciskiem myszy i otwórz „Narzędzia dla programistów Chrome”
  2. Wpisz $._data(($0), 'events');w „Konsolę”
  3. Rozwiń dołączone obiekty i kliknij dwukrotnie handler:wartość.
  4. To pokazuje kod źródłowy dołączonej funkcji, wyszukaj jej część za pomocą zakładki „Wyszukaj”.

I nadszedł czas, aby przestać ponownie wymyślać koło i zacząć używać waniliowych wydarzeń JS ... :)

how-to-find-jquery-click-handler-function

Daniel Sokołowski
źródło
15

Nie będzie to pokazywać niestandardowych zdarzeń, takich jak te, które skrypt może utworzyć, jeśli jest to wtyczka jquery. na przykład :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Panel zdarzeń w sekcji Skrypty w narzędziach dla programistów chrome nie wyświetli „Coś: niestandardowe zdarzenie-jeden”

airtonix
źródło
21
Jak zatem znaleźć te wydarzenia?
Calydon