javascript - Hur man hittar vilken kod som körs av en knapp eller ett element i Chrome med hjälp av Utvecklarverktyg

Jag använder Chrome och min egen webbplats.

Vad jag vet från insidan:

1) Jag har ett formulär där människor registrerar sig genom att klicka på denna orange bildknapp:

2) Jag inspekterar det, och det är allt det är: <img class="formSend" src="images/botoninscribirse2.png">

3) Överst i källkoden finns det massor av skriptkällor. Jag vet vilken knappanropet använder eftersom jag har kodad det: <script src="js/jquery2.js" type="text/javascript"></script>

4) I den filen kunde du hitta: $ (".formSend").click(function() { ... }); vilket är vad som triggas av knappen (för att göra en ganska komplex formulärvalidering och skickande) och vad jag vill är att kunna hitta det med Chrome DevTools på vilken webbplats som helst.

Hur kan jag ta reda på var elementet kallar?

Fliken Listeners fungerade inte för mig. Så då försökte jag kolla klickhändelselyssnare, vilket verkade som ett säkert kort för mig men... det finns ingen jquery2.js där (och jag skulle egentligen inte veta vilken fil koden finns i så jag skulle slösa tid på att kolla alla dessa...):

Min $ (".formSend").click(function() { ... }); funktion i jquery2.js-filen finns inte där.

Jesse förklarar varför:

"Slutligen är anledningen till att din funktion inte är direkt kopplad till klickhändelsehanteraren att jQuery returnerar en funktion som blir kopplad. jQuerys funktion går i sin tur igenom några abstraktionslager och kontroller, och någonstans där utför den din funktion."

Som föreslagits av några av er har jag samlat de metoder som fungerade i ett svar nedan.

Svar #1

Alexander Pavlovs svar kommer närmast det du vill ha.

På grund av omfattningen av jQuery:s abstraktion och funktionalitet måste många hinder övervinnas för att komma till kärnan av händelsen. Jag har satt upp denna jsFiddle för att demonstrera arbetet.

1. Ställa in Avbrottspunkten för Händelselyssnare

Du var nära med den här.

  1. Öppna Chrome Dev Tools (F12) och gå till fliken Källor.

  2. Borra ner till Mus -> Klicka

    3. (klicka för att zooma)

2. Klicka på knappen!

Chrome Dev Tools kommer att pausa skriptkörning och visa dig denna vackra sammanflätning av minifierad kod:

3. Hitta den härliga koden!

Nu är knepet här att inte låta sig dras med när du trycker på tangenten, och hålla ett öga på skärmen.

  1. Tryck på F11-tangenten (Steg In) tills önskad källkod visas

  2. Källkoden nådde äntligen

    • I det jsFiddle-exempel som ges ovan, var jag tvungen att trycka på F11 108 gånger innan jag nådde den önskade eventhanteraren/funktionen
    • Din erfarenhet kan variera beroende på vilken version av jQuery (eller ramverksbibliotek) som används för att binda händelserna
    • Med tillräcklig hängivenhet och tid kan du hitta vilken eventhanterare/funktion som helst

4. Förklaring

Jag har inte det exakta svaret, eller någon förklaring till varför jQuery går igenom de många lager av abstraktion som det gör - allt jag kan föreslå är att det är på grund av det arbete det gör för att abstrahera bort dess användning från webbläsaren som kör koden.

Här är en jsFiddle med en debug-version av jQuery (dvs. inte minifierad). När du tittar på koden vid den första (icke-minifierade) brytpunkten kan du se att koden hanterar många saker:

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

Anledningen till att jag tror att du missade det vid ditt försök när "exekveringen pausas och jag hoppar rad för rad", är eftersom du kanske använde funktionen "Hoppa över" istället för "Stega in". Här är ett svar på StackOverflow som förklarar skillnaderna.

Slutligen är anledningen till att din funktion inte är direkt bunden till klickhändelsehanteraren att jQuery returnerar en funktion som blir bunden. JQuerys funktion går i sin tur igenom några abstraktionslager och kontroller, och någonstans där, kör den din funktion.

Svar #2

Lösning 1: Ignorera lista (brukade vara "Blackbox")

Fungerar utmärkt, minimal installation och inga tredje parter. Dokumentationen säger:

När du använder panelen Källor i Chrome DevTools för att gå igenom kod, händer det ibland att du pausas på kod som du inte känner igen. Du är förmodligen pausad på koden från en av de Chrome-tillägg du har installerat. För att aldrig pausas på tilläggskod, använd Ignorera-listan.

Här är det uppdaterade arbetsflödet:

  1. Öppna Chrome Developer Tools (F12 eller ⌘+⌥+i), gå till inställningar (övre högra hörnet, eller F1). Välj sidan/fliken i vänster navigering/kolumn som heter "Ignore List"

    • Du kanske vill kolla Lägg till innehållsskript i ignorera-listan om du ser för mycket brus i felsökaren

  1. Detta är där du anger RegEx-mönstret för de filer du vill att Chrome ska ignorera under felsökning. Till exempel: jquery\..*\.js (globmönster/mänsklig översättning: jquery.*.js)
  2. Om du vill hoppa över filer med flera mönster kan du lägga till dem med hjälp av rör-tecknet, |, på detta sätt: jquery\..*\.js|include\.postload\.js (vilket fungerar som ett "eller detta mönster", så att säga. Eller fortsätt lägga till dem med "Lägg till"-knappen.
  3. Fortsätt nu till Lösning 3 som beskrivs nedan.

Bonus tips! Jag använder Regex101 regelbundet (men det finns många andra:) för att snabbt testa mina rostiga regex-mönster och ta reda på var jag har fel med steg-för-steg regex-debuggern. Om du ännu inte är "flytande" i reguljära uttryck rekommenderar jag att du börjar använda sajter som hjälper dig att skriva och visualisera dem, såsom http://buildregex.com/ och https://www.debuggex.com/

Du kan också använda snabbmenyn när du arbetar i panelen Källor. När du visar en fil kan du högerklicka i redigeraren och välja Ignorera lista. Detta kommer att lägga till filen i listan i inställningspanelen:

Lösning 2: Visuellt Evenemang

Det är ett utmärkt verktyg att ha:

Visual Event är ett open-source Javascript-bokmärkeskript som tillhandahåller felsökningsinformation om händelser som har kopplats till DOM-element. Visual Event visar:

  • Vilka element har händelser kopplade till sig
  • Typen av händelser som är kopplade till ett element
  • Koden som kommer att köras när händelsen utlöses
  • Källfilen och radnumret där den bifogade funktionen definierades (endast Webkit-webbläsare och Opera)

Lösning 3: Felsökning

Du kan pausa koden när du klickar någonstans på sidan, eller när DOM ändras... och andra typer av JS-brytpunkter som kommer att vara användbara att känna till. Du bör tillämpa blackboxing här för att undvika en mardröm.

I det här fallet vill jag veta exakt vad som händer när jag klickar på knappen.

  1. Öppna Dev Tools -> Fliken Källor, och till höger hitta Event Listener Breakpoints:

  2. Expandera Mouse och välj click

  3. Klicka nu på elementet (exekveringen bör pausas), och du debugger nu koden. Du kan gå igenom all kod genom att trycka på F11 (vilket är Stega in). Eller gå tillbaka några hopp i stacken. Det kan finnas en massa hopp

Lösning 4: Fiska efter nyckelord

Med utvecklarverktyg aktiverade kan du söka i hela kodbasen (all kod i alla filer) med ⌘+⌥+F eller:

och söka #envio eller vilken tagg/klass/id du tror startar festen och du kanske kommer någonstans snabbare än väntat.

Var medveten om att det ibland inte bara finns ett img, utan många element staplade, och du kanske inte vet vilket som utlöser koden.

Om detta ligger lite utanför din kunskap, ta en titt på Chromes handledning om felsökning.

Svar #3

Det låter som att delen "...och jag hoppar rad för rad..." är fel. Gör du StepOver eller StepIn och är du säker på att du inte av misstag missar det relevanta anropet?

Det sagt, felsökning av ramverk kan vara tråkigt just av denna anledning. För att lindra problemet kan du aktivera experimentet "Aktivera felsökningsstöd för ramverk". Lycka till med felsökningen! :)

Relaterade artiklar