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

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.

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

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.

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

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

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

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.

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'); })

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

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/

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ą.