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.
{ }
symbol w lewym dolnym rogu podczas przeglądania js. Magia.Możesz także użyć inspektora Chrome, aby znaleźć załączone zdarzenia w inny sposób:
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
źródło
Wypróbuj rozszerzenie jQuery Audit ( https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ), po zainstalowaniu wykonaj następujące kroki:
źródło
(Najnowsze na 2020 r.) Dla wersji Chrome 83.0.4103.61 :
Wybierz element, który chcesz sprawdzić
Wybierz zakładkę Event Listeners
Upewnij się, że słuchacze Framework pokazują prawdziwy plik javascript zamiast funkcji jquery.
źródło
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)
Szybkie wyszukiwanie #ID powinno ostatecznie doprowadzić do funkcji wiązania.
Na przykład: wyszukiwanie
#foo
doprowadzi Cię doźródło
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 )
Natomiast $ 0 to wybrany element w DOM.
https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4
źródło
findEventHandlers to wtyczka jquery, surowy kod jest tutaj: https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js
Kroki
Wklej nieprzetworzony kod bezpośrednio do konsoli Chrome'a (uwaga: jquery musi być już załadowane)
Użyj następującego wywołania funkcji:
findEventHandlers(eventType, selector);
aby znaleźć procedurę obsługi eventType elementu odpowiedniego selektora.
Przykład :
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/
źródło
W przypadku wersji Chrome 52.0.2743.116:
W Narzędziach dla programistów Chrome otwórz panel „Szukaj”, naciskając
Ctrl
+Shift
+F
.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ą.
źródło