Jak znaleźć kod uruchamiany przez przycisk / element w Chrome za pomocą narzędzi programistycznych

Odpowiedź Alexandra Pavlova jest najbliższa temu, czego chcesz.

Ze względu na rozbudowę abstrakcji i funkcjonalności jQuery, wiele obręczy trzeba przeskoczyć, aby dostać się do mięsa zdarzenia. Ustawiłem ten jsFiddle , aby zademonstrować pracę.

1. Ustawianie punktu przerwania detektora zdarzeń

1. Otwórz Chrome Dev Tools (F12) i przejdź do karty Źródła.
2. Drill down do myszki - > kliknij
   
   (Kliknij, aby powiększyć)

2. / Align = "left" /

Chrome Dev Tools wstrzyma wykonywanie skryptu i przedstawi Ci piękne Uwikłanie minifigurowanego kodu:

(Kliknij aby powiększyć)

3. Znajdź wspaniały kod!

1. prasa klucz F11 (krok w) dopóki nie pojawi się żądany kod źródłowy
2. kod źródłowy w końcu dotarł
   • w próbcejsFiddle podanej powyżej musiałem nacisnąć F11 108 czasy przed osiągnięciem żądanej funkcji / obsługi zdarzenia
   Jeśli nie chcesz, aby Twoje dane były wyświetlane na twoim komputerze, kliknij przycisk "Zapisz".]}
   • z wystarczającym poświęceniem i czasem, możesz znaleźć dowolne wydarzenie handler / function

4. Wyjaśnienie

Nie mam dokładnej odpowiedzi ani wyjaśnienia, dlaczego jQuery przechodzi przez wiele warstw abstrakcji, które robi - wszystko, co mogę zasugerować, to to, że jest to spowodowane zadaniem, które wykonuje, aby abstrakcja z dala od przeglądarki wykonującej kod.

Oto jsFiddle z debugującą wersją jQuery (tzn. nie minifikowaną). Gdy spojrzysz na kod na pierwszym (nie-minified) breakpoint, widać, że kod obsługuje wiele rzeczy:

    // ...snip...

    if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

    // ...snip...

Powodem, dla którego myślę, że przegapiłeś to podczas próby, gdy "wykonanie zatrzymuje się, a ja przeskakuję linia po linii", jest to, że mogłeś użyć funkcji "Step Over" zamiast "Step In". Oto odpowiedź StackOverflow wyjaśniająca różnice.

Wreszcie, powodem, dla którego twoja funkcja jest , a nie bezpośrednio związana z obsługą zdarzenia click jest to, że jQuery zwraca funkcja, która jest związana. funkcja jQuery z kolei przechodzi przez kilka warstw abstrakcji i sprawdza, a gdzieś tam wykonuje twoją funkcję.

Brzmi jak "...i przeskakuję linia po linii..." część jest zła. Czy StepOver lub StepIn i jesteś pewien, że nie przypadkowo przegapić odpowiedniego połączenia?

To powiedziawszy, debugowanie frameworków może być żmudne właśnie z tego powodu. Aby złagodzić ten problem, możesz włączyć eksperyment "włącz obsługę debugowania frameworków" . Miłego debugowania! :)

Możesz użyć findHandlersJS

Możesz znaleźć obsługę wykonując w konsoli chrome:

findEventHandlers("click", "img.envio")

W konsoli chrome zostaną wydrukowane następujące informacje:

• element
  Rzeczywisty element, w którym Obsługa zdarzenia została zarejestrowana w
• wydarzenia
  Tablica z informacjami o procedurach obsługi zdarzeń jquery dla interesującego nas typu zdarzeń (np. click, change, etc)
• handler
  Rzeczywista metoda obsługi zdarzeń, którą możesz zobaczyć klikając ją prawym przyciskiem myszy i wybierając Pokaż definicję funkcji
• selektor
  Selektor przewidział delegowane zdarzenia. Będzie pusty dla bezpośrednich zdarzeń.
• cele
  Lista z elementami, które ta Obsługa zdarzeń ma na celu. Na przykład, w przypadku delegowanej procedury obsługi zdarzeń zarejestrowanej w obiekcie document i skierowanej do wszystkich przycisków na stronie, Ta właściwość wyświetli wszystkie przyciski na stronie. Możesz je najechać i zobaczyć podświetlony w chromie.

Więcej informacji Proszę. i możesz spróbować na tej przykładowej stronie Proszę..

To rozwiązanie wymaga metody danych jQuery .

1. Otwórz konsolę Chrome (chociaż będzie działać każda przeglądarka z załadowanym jQuery)
2. Run $._data($(".example").get(0), "events")
3. wywierć wyjście, aby znaleźć żądaną obsługę zdarzeń.
4. kliknij prawym przyciskiem myszy na "handler" i wybierz "Pokaż definicję funkcji"
5. Kod zostanie wyświetlony w zakładce Sources

$._data() jest tylko dostęp do metody danych jQuery. Bardziej czytelną alternatywą może być jQuery._data().

Ciekawy punkt by this so answer :

Od jQuery 1.8 dane zdarzeń nie są już dostępne z" publicznego API " dla danych. Przeczytaj ten wpis na blogu jQuery . Powinieneś teraz użyć tego zamiast:

jQuery._data( elem, "events" ); elem powinien być elementem HTML, a nie obiekt jQuery, czyli selektor.

Należy pamiętać, że jest to struktura wewnętrzna, "prywatna" i nie powinno być modyfikowane. Użyj tego tylko do celów debugowania.

W starsze wersje jQuery, być może będziesz musiał użyć starej metody czyli:

jQuery( elem ).data( "events" );

Wersja jQuery to: (jQuery._data || jQuery.data)(elem, 'events');