Javascript Execution Tracking in Chrome - wie?

80

Ich habe ~ 100-200 Javascript-Funktionen auf einer Website geladen. Ich möchte feststellen, welche Javascript-Funktion ausgeführt wird, wenn ich in Google Chrome auf das eine oder andere Element klicke. Wie kann ich das mit den Chrome Web Developer Tools machen? Vielen Dank!

Pflastern
quelle

Antworten:

89

Ein einfacher Ansatz besteht darin, die Chrome Developer Tools zu starten, zum Quellenbedienfeld zu wechseln und auf F8(Ausführung anhalten) zu klicken. Dies wird bei der ersten ausgeführten JavaScript-Anweisung unterbrochen.

Ein anderer Ansatz besteht darin, einen Ereignis-Listener-Haltepunkt für die Maus festzulegen oder auf Folgendes zu klicken: Erweitern Sie im selben Quellenbedienfeld die "Ereignis-Listener-Haltepunkte" in der rechten Seitenleiste. Erweitern Sie das Element "Maus" und überprüfen Sie die Ereignisse, bei denen Sie eine Pause einlegen möchten (z. B. "Klicken", "Mausfahren"). Klicken Sie dann auf Ihre Seite und sehen Sie die JS-Ausführungsunterbrechung in den DevTools. Genießen!

Alexander Pawlow
quelle
vielen Dank! Welches Mausereignis soll ich abfangen, wenn ich Text in FCKeditor auswähle, "Linksklick", Maus an einen anderen Ort bewegt und loslässt.
Pave
Ich habe es versucht, aber ... funktioniert immer noch nicht ... ich werde es selbst versuchen. Danke!
Pave
1
OK, überprüfen Sie dann die gesamte Kategorie "Maus", um alle mausbezogenen Ereignis-Listener zu deaktivieren (möglicherweise möchten Sie "Maus bewegen" deaktivieren). Wenn dies für Sie immer noch fehlschlägt, können Sie alle Kategorien überprüfen und nacheinander deaktivieren, wenn Sie auf Ereignisse ohne Bezug stoßen.
Alexander Pavlov
1
Hallo, ich habe eine ähnliche Frage, die Situation ist fast dieselbe, aber in meinem Fall möchte ich nur die gesamte Javascript-Ausführung verfolgen ... Ich möchte sehen, welche Funktionen funktionieren, Schritt für Schritt, nicht nur pausieren oder Haltepunkte setzen? So etwas wie traceGL ... Ich muss verstehen, wie eine Webseite funktioniert ... (meine Javascript-Bibliotheken sind jetzt zu groß, daher muss ich einige Optimierungen
vach
30

Eine Alternative zum Anhalten der Ausführung (was normalerweise gut funktioniert, aber auf Seiten, auf denen häufig periodischer Code ausgeführt wird, nicht gut funktioniert)

Sie können den Chrome-Profiler verwenden, um für einen kurzen Zeitraum aufzuzeichnen. Nach Abschluss der Aufnahme wird eine Zusammenfassung der CPU-Zeit angezeigt, die für eine der Funktionen aufgewendet wurde, die während der Aufnahme ausgeführt wurden. Die CPU-Zeit ist uns eigentlich egal, wir haben nur dieses Tool verwendet, weil es uns zeigt, welche Funktionen ausgeführt wurden.

Beginnen Sie einfach mit der Aufnahme:

Hinweis: In Chrome 58 und höher wird diese Registerkarte in "Speicher" umbenannt. Referenz

Starttaste für den Chrome-Profiler

Führen Sie dann Ihre Aktion aus (z. B. klicken Sie auf eine Schaltfläche auf der Webseite oder tun Sie, was auch immer zur Ausführung des interessanten Codes führt). Stoppen Sie dann die Aufnahme und zeigen Sie das Ergebnis an:

Zusammenfassung der Profiler-Ergebnisse

Beachten Sie, dass ich den Anzeigemodus "von oben nach unten" verwende. Dieser zeigt Ihnen den Aufrufstapel und Sie können einen Drilldown durchführen, um zu sehen, welche Funktionen schließlich aufgerufen wurden. Zum Beispiel wurde zuerst eine anonyme Funktion aufgerufen (wahrscheinlich als Ergebnis von setTimeout oder vielleicht eines Click-Event-Handlers), und dann wurde eine Methode aufgerufen, die identifiziert wurde, durch s.track.s.tdie dann aufgerufen wurde s_doPluginsund so weiter ... Das Wichtigste ist, dass im Top-Down-Modus die Einträge an der Spitze des Baumes den Beginn eines Call - Stack bilden, und so sind sie in der Regel eine Funktion durch eine Timer - Funktion registriert ( setTimeout, setInterval, requestAnimationFrame, etc ...) oder einen Event - Handler ( click, mousemove, load, etc .. .).

Sie können auch den Anzeigemodus "Diagramm" verwenden, der Ihnen zeigt, welche Funktion zu welchem ​​Zeitpunkt aufgerufen wurde und von links nach rechts in einem Diagramm dargestellt ist. Auf diese Weise können Sie feststellen, nach welcher Funktion Sie wirklich suchen, da Sie wahrscheinlich wissen, wann der Code in Ihrer Aufnahme ausgeführt wurde (z. B. genau in der Mitte).

Übrigens - ich glaube, die meisten anderen modernen Browser haben ähnliche Fähigkeiten.

Ziege
quelle
14

Ich möchte feststellen, welche Javascript-Funktion ausgeführt wird, wenn ich in Google Chrome auf das eine oder andere Element klicke.

Jetzt gibt es eine großartige Erweiterung namens Visual Event , die genau das tut. Es werden nur Ereignishandler erkannt, die über gängige js-Bibliotheken (jQuery, YUI, MooTools, Prototype, Glow) und DOM Level 0-Ereignisse festgelegt wurden.

Dmitry Pashkevich
quelle
funktioniert gut. Ich bin mir nicht sicher über die Sicherheit, deshalb höre ich auf, wenn ich nicht debugge.
MagicLAMP
3
Sieht aus wie die Erweiterung wurde entfernt :( Es wurde eine Weile nicht aktualisiert
Dmitry Pashkevich