Jak znaleźć kod uruchamiany przez przycisk lub element w Chrome za pomocą Narzędzi dla programistów

305

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:

wprowadź opis zdjęcia tutaj

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 ... .):

wprowadź opis zdjęcia tutaj

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 .

Carles Alcolea
źródło
4
Zwykle korzystam z Visual Eventbookmarkletu. Wykrywa zdarzenia kliknięcia powiązane popularnymi bibliotekami i tworzy nakładkę witryny pokazującą, gdzie zdarzenia są powiązane, i podaje próbki kodu oraz lokalizacje źródłowe dla każdego zdarzenia.
Kevin B
3
@DontVoteMeDown Ale to pokonuje całe pytanie. Załóżmy, że mam w witrynie dziesiątki plików * .js. Skąd wiesz, że kod uruchamiany przez przycisk znajduje się w pliku jquery2.js?
Carles Alcolea
1
Rozumiem, jak działa Visual Event (dzięki tobie BTW), ale kiedy klikniesz ten przycisk, twoja przeglądarka doskonale wie, co uruchomić , ponieważ ją uruchamia. Chcę tylko upewnić się, że nie da się tego zrobić za pomocą narzędzi programistycznych i przejdę dalej.
Carles Alcolea
1
Dobre pytanie, zdecydowanie uważam, że jest to funkcja, którą powinien mieć Chrome (lub Firefox)
tomysshadow
1
Jeśli znalazłeś odpowiedź na to pytanie, dodaj ją jako odpowiedź. Zachęcamy do udzielenia odpowiedzi na własne pytanie , ale nie jest możliwe udzielenie odpowiedzi poprzez edycję pytania.
Facet z

Odpowiedzi:

209

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ć)
    Chrome Dev Tools -> karta Źródła -> Mysz -> Kliknij

2. Kliknij przycisk!

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

Chrome Dev Tools wstrzymał wykonywanie skryptu (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ę

Pożądany moduł obsługi / funkcji zdarzenia


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

Jesse
źródło
Wow, jesteś i @ Alexander-Pavlov ma całkowitą rację, tęskniłem. Teraz próbowałem jeszcze raz i zajmuje mi 132 F11 kluczowe trafienia! Teraz ma to sens, ale jest to po prostu niepraktyczne. Poprawię jednak moje pytanie.
Carles Alcolea
@CarlesAlcolea Yup - jest to absolutnie niepraktyczne, ale nie niemożliwe. Każdy, kto ma wystarczająco dużo poświęcenia i czasu, może znaleźć wszystko, co zrobiono w HTML i JavaScript, nawet jeśli jest głęboko schowany i zminimalizowany. Zachęcamy do zaznaczenia odpowiedzi Aleksandra Pawłowa lub mojej jako zaakceptowanej.
Jesse
1
tak, właśnie kończę. Do Twojej wiadomości, jeśli jeszcze tego nie wiesz, jeśli klikniesz lewy lewy przycisk nawiasów klamrowych ( i.imgur.com/ALoMQkR.png ) na skróconym skrypcie, „upiększy” go i będzie działał podczas debugowania.
Carles Alcolea
Począwszy od 2014 r. Chrome ma wbudowaną funkcję czarnej skrzynki w Chrome Dev Tools, która eliminuje potrzebę stosowania punktu 1 powyżej.
Brian
1
@Brian, a oto post na blogu opisujący skrypty do czarnej skrzynki .
Cristian Diaconescu,
157

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.

Oto zaktualizowany przepływ pracy:
  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

wprowadź opis zdjęcia tutaj

  1. 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)
  2. 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”.
  3. 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:

wprowadź opis zdjęcia tutaj


Rozwiązanie 2: Zdarzenie wizualne

wprowadź opis zdjęcia tutaj

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:

    wprowadź opis zdjęcia tutaj

  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:

wprowadź opis zdjęcia tutaj

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 .

Carles Alcolea
źródło
Nie możesz nigdzie znaleźć blackboxingu? Spróbuj: chrome: // flags / # enable-devtools-eksperymenty
ruuter
1
@CarlesAlcolea NIESAMOWITE !! Właśnie zaoszczędziłeś TONY czasu dzięki tej sztuczce!
Prix
ktoś wie, dlaczego po uruchomieniu zdarzenia wizualnego strona sama się odświeża, tracąc w ten sposób wszystkie informacje?
Edu Castrillon
W przypadku rozwiązania 1 należy kliknąć elipsy w prawym skrajnym rogu, aby uzyskać dostęp do USTAWIEŃ FULL CHROME DEVTOOLS, a raczej nacisnąć F1, gdy DevTools jest otwarte. Teraz zobaczysz BlackBoxing jako zakładkę po lewej stronie. Cieszyć się!
pensebien
1
Wydaje się, że nowy najlepszy sposób na pisanie skryptów w blackboxie jest niezwykle łatwy. Wystarczy przejść do tego pliku w panelu Źródła i kliknąć plik prawym przyciskiem myszy (nie na pozycji na liście po lewej stronie, faktycznie otworzyć plik i kliknąć plik prawym przyciskiem myszy), a następnie wybrać „Blackbox this script”. Proszę bardzo!
Dan
17

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! :)

Alexander Pavlov
źródło
Działa to doskonale (i masz rację, spóźniłem się na skok), dodam to do mojego pytania. Zmusiło mnie to również do ponownego przeczytania wzorców wyrażeń regularnych: P Dzięki.
Carles Alcolea
7

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 .

Rui
źródło
3

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

apptaro
źródło
2
Dziękujemy za dodanie kolejnych pomysłów. To inny sposób na zrobienie tego. Minusem jest to, że potrzebuje jQuery, a tytuł tego pytania wymaga polegania wyłącznie na narzędziach Chrome. Zredaguję twoją odpowiedź, aby było jasne, że jest to metoda jQuery, a także użyję czegoś bardziej rozsądnego niż „NAJLEPSZE ROZWIĄZANIE” -). Proszę spojrzeć na stackoverflow.com/help/how-to-answer
Carles Alcolea,