Jak za pomocą przeglądarki Chrome sprawdzić, które zdarzenia są powiązane z elementem

148

Załóżmy, że mam łącze na mojej stronie:

<a href="#" id="foo">Click Here</a>

Nie wiem nic więcej, ale kiedy klikam link, alert("bar")wyświetla się. Więc wiem, że gdzieś jakiś kod jest związany #foo.

Jak mogę znaleźć kod, który jest powiązany ze alert("bar")zdarzeniem kliknięcia? Szukam rozwiązania z Chrome.

Ps .: Przykład jest fikcyjny, więc nie szukam rozwiązania typu: "Użyj XXXXXX i wyszukaj w całym projekcie" alert (\ "bar \") ". Chcę prawdziwego rozwiązania do debugowania / śledzenia.

FMaz008
źródło

Odpowiedzi:

140

Korzystanie z Chrome 15.0.865.0 dev . W panelu Elementy znajduje się sekcja „Słuchacze wydarzeń”:

wprowadź opis obrazu tutaj

Oraz „Punkty przerwania detektorów zdarzeń” w panelu Skrypty. Użyj myszki -> kliknij punkt przerwania, a następnie „przejdź do następnego wywołania funkcji”, obserwując stos wywołań, aby zobaczyć, która funkcja obszaru użytkownika obsługuje zdarzenie. Idealnie byłoby, gdybyś zastąpił zminimalizowaną wersję jQuery niezminifikowaną, abyś nie musiał wkraczać przez cały czas i używać step over, gdy jest to możliwe.

wprowadź opis obrazu tutaj

Ionuț G. Stan
źródło
10
Coraz bliżej, ale większość wyników wskazuje na wiersz 16 ... jquery.min.js :( (Rozumiem dlaczego, nie ma potrzeby wyjaśniać, ale jak możemy znaleźć, kto wywołał metodę bind () jQuery?
FMaz008
Wszystkie te narzędzia są również dostępne w przeglądarce Chrome 12.0.742.100. :) Dzięki !
FMaz008,
13
@Fluffy: Nie musisz. Po prostu kliknij { }symbol w lewym dolnym rogu podczas przeglądania js. Magia.
Hannes Schneidermayer
Przechodzenie przez złożony kod wysyłający zdarzenia jQuery jest dużym problemem. Poniższa odpowiedź jQuery Audit ( stackoverflow.com/a/30487583/24267 ) jest o wiele lepsza.
mhenry1384
3
Aby wykluczyć jquery ze stosu wywołań, umieść w czarnej skrzynce skrypt: developer.chrome.com/devtools/docs/blackboxing @ IonuțG.Stan lub mods, czy możesz zaktualizować odpowiedź, odwołując się do blackboxingu - wydaje się być częstym pytaniem istotne dla tej odpowiedzi.
Chris Hynes
47

Możesz także użyć inspektora Chrome, aby znaleźć załączone zdarzenia w inny sposób:

  1. Kliknij prawym przyciskiem myszy element do sprawdzenia lub znajdź go w panelu „Elementy”.
  2. Następnie w zakładce / okienku „Detektory zdarzeń” rozwiń zdarzenie (np. „Kliknij”)
  3. Rozwiń różne węzły podrzędne, aby znaleźć ten, który chcesz, a następnie poszukaj, gdzie znajduje się węzeł podrzędny „handler”.
  4. Kliknij prawym przyciskiem myszy słowo „funkcja”, a następnie kliknij „Pokaż definicję funkcji”

To przeniesie Cię do miejsca, w którym zdefiniowano program obsługi, jak pokazano na poniższym obrazku i wyjaśniono przez Paula Irisha tutaj: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA

„Pokaż definicję funkcji”

Matty J.
źródło
dwa lata i nadal najlepsza odpowiedź na to pytanie.
Stuart
16

Wypróbuj rozszerzenie jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), po zainstalowaniu wykonaj następujące kroki:

  1. Sprawdź element
  2. Na nowej karcie „ jQuery Audit ” rozwiń właściwość Events
  3. Wybierz wydarzenie, którego potrzebujesz
  4. We właściwości handler kliknij prawym przyciskiem myszy funkcję i wybierz „ Pokaż definicję funkcji
  5. Zobaczysz teraz kod powiązania zdarzenia
  6. Kliknij przycisk „ Drukuj ładny ”, aby uzyskać bardziej czytelny widok kodu
Javier Armendariz
źródło
1
To doskonałe rozszerzenie, które pozwala zaoszczędzić mnóstwo czasu na przeglądaniu JavaScript.
Neil Monroe
Często stwierdzam, że pozycja „Detektory zdarzeń” zawiera „Brak nasłuchiwaczy zdarzeń”, a wybranie opcji „Punkty przerwania detektora zdarzeń”> Mysz> Kliknięcie nie tworzy punktu przerwania. Ta wtyczka działa bardzo dobrze.
StuartN
@Javier> to świetna odpowiedź. Czy to działa w przypadku mecanisme javascript (bez jQuery)?
Mahefa
11

(Najnowsze na 2020 r.) Dla wersji Chrome 83.0.4103.61 :

Chrome Developer Tools - Event Listener

  1. Wybierz element, który chcesz sprawdzić

  2. Wybierz zakładkę Event Listeners

  3. Upewnij się, że słuchacze Framework pokazują prawdziwy plik javascript zamiast funkcji jquery.

Lovelyramos
źródło
6

Edycja : zamiast mojej własnej odpowiedzi, ta jest całkiem doskonała: Jak debugować powiązania zdarzeń JavaScript / jQuery za pomocą Firebug (lub podobnego narzędzia)

Narzędzia programistyczne Google Chromes mają wbudowaną funkcję wyszukiwania w sekcji skryptów

Jeśli nie znasz tego narzędzia: (na wszelki wypadek)

  • kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie (w chrome)
  • kliknij „Sprawdź element”
  • kliknij kartę „Skrypty”
  • Pasek wyszukiwania w prawym górnym rogu

Szybkie wyszukiwanie #ID powinno ostatecznie doprowadzić do funkcji wiązania.

Na przykład: wyszukiwanie #foodoprowadzi Cię do

$('#foo').click(function(){ alert('bar'); })

wprowadź opis obrazu tutaj

Michael Jasper
źródło
4
Niezły początek, ale co, jeśli mam 1500 odwołań do #foo, większość z nich, które niczego nie wiążą, lub w przypadku, gdy mam wiele identyfikatorów #foo w zewnętrznych skryptach, które w tym przypadku nie są uruchamiane?
FMaz008,
Świetne pytanie. Z mojego doświadczenia wynika, że ​​właśnie tam zwykle rozpoczyna się ludzki proces debugowania :)
Michael Jasper
1
Hehe, masz rację, ale moje pytanie dotyczyło również tego, co muszę zrobić jako człowiek: p
FMaz008
6

Aktualizacja 2018 - może być pomocna dla przyszłych czytelników:

Nie jestem pewien, kiedy zostało to pierwotnie wprowadzone w Chrome. Ale innym (łatwym) sposobem, w jaki można to teraz zrobić w Chrome, są polecenia konsoli.

Na przykład: ( w konsoli typu chrome )

getEventListeners($0)

Natomiast $ 0 to wybrany element w DOM.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4

wprowadź opis obrazu tutaj

Kris Hollenbeck
źródło
4

findEventHandlers to wtyczka jquery, surowy kod jest tutaj: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

Kroki

  1. Wklej nieprzetworzony kod bezpośrednio do konsoli Chrome'a ​​(uwaga: jquery musi być już załadowane)

  2. Użyj następującego wywołania funkcji: findEventHandlers(eventType, selector);
    aby znaleźć procedurę obsługi eventType elementu odpowiedniego selektora.

Przykład :

findEventHandlers("click", "#clickThis");

Następnie, jeśli istnieje, dostępna procedura obsługi zdarzeń pokaże się poniżej, musisz rozwinąć, aby znaleźć procedurę obsługi, kliknij prawym przyciskiem myszy funkcję i wybierz show function definition

Zobacz: https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

unifreak
źródło
3

W przypadku wersji Chrome 52.0.2743.116:

  1. W Narzędziach dla programistów Chrome otwórz panel „Szukaj”, naciskając Ctrl+ Shift+ F.

  2. Wpisz nazwę elementu, który próbujesz znaleźć.

Wyniki dla powiązanych elementów powinny pojawić się w panelu i wskazywać plik, w którym się znajdują.

Ghost Echo
źródło