Javascript Execution Tracking in Chrome - wie?

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!

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!

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

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:

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.

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.