Używam Chrome i własnej strony internetowej.

Co wiem od środka:

1 ) Mam formularz, w którym ludzie rejestrują się, klikając ten pomarańczowy przycisk obrazu:

2 ) Sprawdzam to i to wszystko: <img class="formSend" src="images/botoninscribirse2.png">

3 ) Na górze kodu źródłowego znajduje się mnóstwo źródeł skryptów. Wiem, który przycisk wywołuje, ponieważ go zakodowałem:<script src="js/jquery2.js" type="text/javascript"></script>

4 ) W tym pliku możesz znaleźć: $(".formSend").click(function() { ... });co jest uruchamiane przez przycisk (aby wykonać dość złożoną weryfikację formularza i przesłać) i co chcę, aby móc to znaleźć za pomocą narzędzi chrome dev na dowolnej stronie internetowej.

Jak mogę dowiedzieć się, gdzie wywołuje element?

Karta Słuchacze nie działała dla mnie. Próbowałem więc poszukać detektorów zdarzeń kliknięcia, co wydawało mi się bezpiecznym założeniem, ale ... tam nie jquery2.jsma (i tak naprawdę nie wiedziałbym, który plik to kod, więc marnowałem czas na sprawdzanie wszystkich tych ... .):

Mojej $(".formSend").click(function() { ... });funkcji w jquery2.jspliku nie ma.

Jesse wyjaśnia, dlaczego :

„Wreszcie przyczyną, dla której twoja funkcja nie jest bezpośrednio związana z obsługą zdarzeń kliknięcia, jest to, że jQuery zwraca funkcję, która zostaje powiązana. Z kolei funkcja jQuery przechodzi przez pewne warstwy abstrakcji i sprawdza, a gdzieś tam wykonuje swoją funkcję . ”

Jak sugeruje niektórzy z was, zebrałem metody, które zadziałały w jednej odpowiedzi poniżej .

Odpowiedź Aleksandra Pawłowa zbliża się do tego, czego chcesz.

Ze względu na rozległość abstrakcji i funkcjonalności jQuery wiele skoków wymaga przeskoczenia, aby dotrzeć do sedna wydarzenia. Skonfigurowałem ten jsFiddle, aby zademonstrować pracę.

1. Konfigurowanie punktu przerwania detektora zdarzeń

Byłeś blisko tego.

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

2. Kliknij przycisk!

Chrome Dev Tools wstrzyma wykonywanie skryptu i przedstawi ten piękny splątanie zminimalizowanego kodu:

(kliknij, aby powiększyć)

3. Znajdź wspaniały kod!

Teraz sztuczka polega na tym, aby nie dać się ponieść naciskaniu klawisza i nie spuszczać oka z ekranu.

1. Naciśnij F11klawisz (Step In), aż pojawi się żądany kod źródłowy
2. W końcu osiągnięto kod źródłowy
   • W powyższej próbce jsFiddle musiałem nacisnąć F11 108 razy, zanim dotarłem do żądanego modułu obsługi / funkcji zdarzenia
   • Twój przebieg może się różnić w zależności od wersji jQuery (lub biblioteki frameworka) użytej do powiązania zdarzeń
   • Przy wystarczającym poświęceniu i czasie możesz znaleźć dowolną funkcję obsługi zdarzeń / funkcję

4. Objaśnienie

Nie mam dokładnej odpowiedzi ani wyjaśnienia, dlaczego jQuery przechodzi przez wiele warstw abstrakcji, którą robi - wszystko, co mogę zasugerować, to fakt, że jest to zadanie polegające na oderwaniu jego użycia od przeglądarki wykonującej kod .

Oto jsFiddle z debugowaną wersją jQuery (tzn. Nie zminimalizowana). Gdy spojrzysz na kod pierwszego (nie zminimalizowanego) punktu przerwania, zobaczysz, ż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 „ wykonania pauzy i 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 przyczyną, dla której twoja funkcja nie jest bezpośrednio związana z obsługą zdarzeń kliknięcia, jest to, że jQuery zwraca funkcję, która zostaje powiązana. Z kolei funkcja jQuery przechodzi przez niektóre warstwy abstrakcji i sprawdza, a gdzieś tam wykonuje twoją funkcję.

Rozwiązanie 1: Framework blackboxing

Działa świetnie, minimalna konfiguracja i brak stron trzecich.

Zgodnie z dokumentacją Chrome :

Co się stanie, gdy skryjesz skrypt?

Wyjątki zgłaszane z kodu biblioteki nie zostaną wstrzymane (jeśli włączona jest opcja Wstrzymaj na wyjątkach), Wejście do / wyjście / przekroczenie kodu biblioteki, Punkty przerwania detektora zdarzeń nie włamują się do kodu biblioteki, Debuger nie zatrzyma się na żadnym punkcie przerwania ustawionym w bibliotece kod. W rezultacie debugujesz kod aplikacji zamiast zasobów innych firm.

1. Pop otwórz Chrome Developer Tools ( F12lub ⌘+ ⌥+ i), przejdź do ustawień (w prawym górnym rogu lub F1). Znajdź kartę po lewej stronie o nazwie „ Blackboxing ”

2. Tutaj umieszczasz wzór RegEx plików, które Chrome ma zignorować podczas debugowania. Na przykład: jquery\..*\.js(glob wzorzec / ludzki tłumaczenie: jquery.*.js)
3. Jeśli chcesz pominąć pliki z wieloma wzorami , możesz dodać je za pomocą znaku potoku |, na przykład tak: jquery\..*\.js|include\.postload\.js(który działa tak jak „lub ten wzór”, że tak powiem. Lub kontynuuj dodawanie ich za pomocą przycisku „Dodaj”.
4. Teraz przejdź do rozwiązania 3 opisanego poniżej.

Dodatkowa wskazówka! Używam Regex101 regularnie (ale jest wiele innych :), aby szybko przetestować moje zardzewiałe wzorce wyrażeń regularnych i dowiedzieć się, gdzie się mylę z debugerem wyrażeń regularnych krok po kroku. Jeśli nie jesteś jeszcze „biegły” w wyrażeniach regularnych, radzę zacząć korzystać z witryn, które pomagają Ci pisać i wizualizować je, takie jak http://buildregex.com/ i https://www.debuggex.com/

Z menu kontekstowego można także korzystać podczas pracy w panelu Źródła. Podczas przeglądania pliku możesz kliknąć edytor prawym przyciskiem myszy i wybrać Skrypt Blackbox. Spowoduje to dodanie pliku do listy w panelu Ustawienia:

Rozwiązanie 2: Zdarzenie wizualne

To doskonałe narzędzie do :

Visual Event to bookmarklet Javascript typu open source, który dostarcza informacji debugowania o zdarzeniach, które zostały dołączone do elementów DOM. Zdarzenie wizualne pokazuje:

• Które elementy mają powiązane zdarzenia
• Typ zdarzeń dołączonych do elementu
• Kod, który zostanie uruchomiony ze zdarzeniem, zostanie wyzwolony
• Plik źródłowy i numer wiersza, dla którego zdefiniowano dołączoną funkcję (tylko przeglądarki Webkit i Opera)

Rozwiązanie 3: Debugowanie

Możesz wstrzymać kod, gdy klikniesz gdzieś na stronie lub gdy DOM zostanie zmodyfikowany ... i inne rodzaje punktów przerwania JS , które warto znać. Powinieneś zastosować tutaj blackboxing , aby uniknąć koszmaru.

W tym przypadku chcę wiedzieć, co dokładnie dzieje się po kliknięciu przycisku.

1. Otwórz Narzędzia deweloperskie -> zakładka Źródła, a po prawej znajdź Event Listener Breakpoints:

   

2. Rozwiń Mousei wybierzclick

3. Teraz kliknij element (wykonanie powinno zostać wstrzymane), a teraz debugujesz kod. Możesz przejść przez naciśnięcie całego kodu F11(czyli Step in ). Lub cofnij się o kilka skoków na stosie. Może być mnóstwo skoków

Rozwiązanie 4: Słowa kluczowe dotyczące połowów

Po aktywacji Dev Tools możesz przeszukiwać całą bazę kodu (cały kod we wszystkich plikach) za pomocą ⌘+ ⌥+ Flub:

i wyszukiwanie, #envioczy jakikolwiek inny tag / klasa / id, który Twoim zdaniem rozpoczyna imprezę i możesz dostać się gdzieś szybciej niż oczekiwano.

Pamiętaj, że czasami jest nie tylko imgwiele elementów, ale możesz nie wiedzieć, który wyzwala kod.

Jeśli jest to trochę poza Twoją wiedzą, zapoznaj się z samouczkiem Chrome na temat debugowania .

Wygląda na to, że część „... i przeskakuję linia po linii ...” jest nieprawidłowa. Czy używasz StepOver lub StepIn i jesteś pewien, że przypadkowo nie przegapisz odpowiedniego połączenia?

To powiedziawszy, frameworki do debugowania mogą być nużące właśnie z tego powodu. Aby rozwiązać 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źć przewodnik, wykonując w konsoli chrome:

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

Otrzymasz następujące informacje wydrukowane w konsoli Chrome:

• element
  Rzeczywisty element, w którym zarejestrowano moduł obsługi zdarzeń
• events
  Tablica z informacjami o modułach obsługi zdarzeń jquery dla interesującego nas typu zdarzenia (np. kliknięcie, zmiana itp.)
• handler
  Rzeczywista metoda obsługi zdarzeń, którą można zobaczyć, klikając ją prawym przyciskiem myszy i wybierając opcję Pokaż definicję funkcji
• selektor
  Selektor przewidziany dla zdarzeń delegowanych. Będzie pusty dla bezpośrednich wydarzeń.
• target
  Wymień elementy zawierające elementy, na które cel ten obsługuje. Na przykład dla procedury obsługi zdarzeń delegowanych, która jest zarejestrowana w obiekcie dokumentu i jest kierowana do wszystkich przycisków na stronie, ta właściwość wyświetli wszystkie przyciski na stronie. Możesz je najechać myszką i zobaczyć je podświetlone w chromie.

Więcej informacji tutaj, a możesz spróbować w tej przykładowej witrynie tutaj .

To rozwiązanie wymaga metody danych jQuery .

1. Otwórz konsolę Chrome (chociaż każda przeglądarka z załadowanym jQuery będzie działać)
2. Biegać $._data($(".example").get(0), "events")
3. Przeanalizuj dane wyjściowe, aby znaleźć żądaną procedurę obsługi zdarzeń.
4. Kliknij prawym przyciskiem myszy na „handler” i wybierz „Pokaż definicję funkcji”
5. Kod zostanie wyświetlony na karcie Źródła

$._data()właśnie uzyskuje dostęp do metody danych jQuery. Bardziej czytelną alternatywą może być jQuery._data().

Interesujący punkt tej odpowiedzi SO :

Począwszy od jQuery 1.8, dane zdarzenia nie są już dostępne z „publicznego interfejsu API” dla danych. Przeczytaj ten post na blogu jQuery . Powinieneś teraz użyć tego zamiast:

jQuery._data( elem, "events" ); elem powinien być elementem HTML, a nie obiektem jQuery lub selektorem.

Pamiętaj, że jest to wewnętrzna, „prywatna” struktura i nie należy jej modyfikować. Używaj tego tylko do celów debugowania.

W starszych wersjach jQuery może być konieczne użycie starej metody:

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

Wersja agnostyczna jQuery byłaby: (jQuery._data || jQuery.data)(elem, 'events');