Kommt Ihnen das bekannt vor? Sie möchten in den Chrome-Entwicklertools ein Leistungsproblem beheben. Aufgrund der Fülle an Informationen im Bereich „Leistung“ ist es jedoch schwierig, sich auf die relevantesten und umsetzbaren Informationen zu konzentrieren. Zwischen der Länge der Zeitleiste, der Tiefe des Flame-Diagramms und der Bandbreite der vielen verschiedenen Datenspuren kann es eine Herausforderung sein, sich zurechtzufinden. Das Leistungssteuerfeld ist zwar so leistungsstark wie der Bereich „Leistung“, aber seine Nützlichkeit muss nicht auf Kosten der Nutzerfreundlichkeit gehen.
Im Rahmen unserer Initiative zur Verbesserung der Performance-Tools von Chrome haben wir vor Kurzem drei neue Funktionen eingeführt, mit denen die Informationsdichte reduziert und Entwicklerteams ihre Workflows anpassen können:
- Irrelevante Teile der Zeitachse ausblenden
- Irrelevante Teile des Flame-Diagramms ausblenden
- Nicht relevante Titel ausblenden
In diesem Beitrag werden wir uns jede dieser Funktionen näher ansehen und zeigen, wie Sie sie nutzen können, um sich auf die wichtigsten Informationen zu konzentrieren.
Irrelevante Teile der Zeitachse ausblenden
Die Leistung im Web wird im Millisekundenbereich gemessen. Selbst wenn Ihre Leistungsaufzeichnung nur wenige Sekunden lang ist, gibt es also viele Möglichkeiten, den Platz zu verlieren.
In Chrome 122 haben wir die Möglichkeit zum Erstellen von Navigationspfaden hinzugefügt. Mit dieser Funktion können Sie die Begrenzung der Zeitachse so festlegen, dass Sie nur innerhalb eines von Ihnen festgelegten Bereichs zoomen oder schwenken können. Das Einschränken der Zeitachse kann besonders nützlich sein, wenn Sie Probleme mit der Reaktionszeit beheben möchten, damit Sie sich auf eine einzelne Interaktion oder eine problematische lange Aufgabe konzentrieren können.
Der vorherige Screenshot zeigt eine Nahaufnahme der Zeitachsenübersicht, in der die Hauptthreadaktivität wie Skriptausführung und Präsentationsarbeit visualisiert wird. Wenn Sie den Mauszeiger darüber halten, wird eine neue Schaltfläche angezeigt, mit der die Begrenzung der Zeitachse auf das aktuelle Fenster festgelegt wird. Die Schaltfläche ist durch die Breite des Zeitfensters in Millisekunden und das Symbol beschriftet. Die Breadcrumbs befinden sich über der Zeitachsenübersicht und sind nach der Größe ihres Zeitfensters beschriftet.
Um diese Funktionen zu nutzen,
- Zoomen und schwenken Sie die Zeitachse auf einen Bereich, der Sie interessiert.
- Klicken Sie in der Zeitachsenübersicht auf das Lupensymbol , um die Zeitachse zu fixieren und einen Navigationspfad festzulegen.
- Wiederholen Sie diese Schritte bei Bedarf, um einen verschachtelten Bereich heranzuzoomen.
- Klicken Sie auf die Klickpfade, um zu vorherigen Interessenbereichen oder zur gesamten Zeitachse zurückzukehren.
Durch das Zuschneiden der Zeitachse können Sie vermeiden, dass Sie versehentlich außerhalb des Rahmens zu einem irrelevanten Teil der Zeitleiste scrollen. Bei Bedarf können Sie jedoch auf die Breadcrumbs klicken, um wieder herauszuzoomen. Ein weiterer Vorteil ist, dass die Übersicht der Zeitachse an die folgenden Tracks angepasst wird. Dadurch lassen sich Leistungsmöglichkeiten wie erzwungene Umbrüche deutlich leichter erkennen und ihre Ursache im Flame-Diagramm ermitteln.
Irrelevante Teile des Flammendiagramms ausblenden
Die Analyse der Hauptthread-Aktivität ist keine Kleinigkeit. Dieser Teil des Steuerfelds „Leistung“ wird als Flame-Diagramm bezeichnet, weil die Aufrufstacks so lang und drehbar werden können. In einigen extremen Fällen können diese Stacks so unhandlich sein, dass es schwierig ist, den Gesamteindruck zu verstehen und sich auf das zu konzentrieren, was Sie optimieren möchten.
Ab Chrome 124 können Sie genau anpassen, welche Einträge im Flame-Diagramm ausgeblendet werden sollen, und sich so auf die relevantesten Informationen konzentrieren.
Wenn Sie im Flame-Diagramm mit der rechten Maustaste auf eine Funktion klicken, wird ein Kontextmenü mit mehreren Optionen zum Ausblenden von Einträgen angezeigt:
- Funktion ausblenden: Die ausgewählte Funktion wird aus dem Flammendiagramm entfernt. Die untergeordneten Elemente werden nach oben verschoben und direkt nach der übergeordneten Funktion angezeigt.
- Untergeordnete Elemente ausblenden: Das Flame-Diagramm wird an der ausgewählten Funktion bereinigt und alle untergeordneten Elemente werden ausgeblendet.
- Wiederkehrende untergeordnete Elemente ausblenden: Entfernen Sie alle Instanzen der ausgewählten Funktion aus dem Rest des Flame-Diagramms.
Es gibt auch einige hilfreiche Tastenkombinationen, die Sie verwenden können, wenn eine Funktion ausgewählt ist:
- H: ausgewählte Funktion ausblenden
- C Blendet die untergeordneten Elemente der ausgewählten Funktion aus
- R: Instanzen der ausgewählten Funktion später im Stack ausblenden
- U: die ausgeblendeten untergeordneten Elemente der ausgewählten Funktion einblenden
Nicht relevante Skripts dauerhaft ausblenden
Mit der Option Skript zum Ignorieren der Liste hinzufügen werden die ausgewählte Funktion sowie alle anderen Funktionen, die in derselben Skriptdatei definiert wurden, im Flame-Diagramm ausgeblendet. Das Script wird auch der Liste zu ignorierender Nutzer hinzugefügt. Diese Liste wird vom Debugger der Entwicklertools verwendet, um Funktionen zu übergehen und die vom Script stammenden Ausnahmen zu ignorieren.
Scripts, die der Ignorieren-Liste hinzugefügt wurden, werden beibehalten, sodass sie in neuen Traces weiterhin im Flame-Diagramm ausgeblendet werden. Skripts, die Sie nicht verwalten, eignen sich gut für die Liste zu ignorierender Nutzer. Andererseits ist das Ausblenden einzelner Funktionen im aktuellen Trace nur vorübergehend und situationsabhängig. Sie können beispielsweise einen umständlichen Stapel rekursiver Funktionsaufrufe ausblenden, um die Arbeit mit dem Trace zu erleichtern.
Wenn Sie die Ignorieren-Liste oder andere ausgeblendete Funktionen im Flame-Diagramm zurücksetzen möchten, können Sie das Kontextmenü verwenden, um die untergeordneten Funktionen der ausgewählten Funktion oder alle ausgeblendeten Funktionen im Trace zurückzusetzen. Funktionen mit ausgeblendeten untergeordneten Elementen werden mit dem Symbol ▼ gekennzeichnet. Dadurch werden die untergeordneten Elemente auch zurückgesetzt, wenn darauf geklickt wird.
Jegliche unnötige Tiefe und Komplexität, die Sie aus dem Flame-Diagramm entfernen können, macht es wesentlich nutzerfreundlicher. Die Möglichkeit, die angezeigten Einträge anzupassen, ist eine ergonomische Verbesserung, damit Sie sich auf die wichtigsten Informationen für die jeweilige Aufgabe konzentrieren können.
Nicht relevante Tracks ausblenden
Die Aktivität des Hauptthreads macht nur einen Track des Bereichs „Leistung“ aus. Mit den Tracks im Bereich „Leistung“ wird die Aktivität eines Prozesses visualisiert. Sie sind alle auf eine gemeinsame Zeitachse ausgerichtet, um die Fehlerbehebung zu erleichtern. Neben dem Main-Track gibt es einzelne Tracks für die anderen Subframes, Threads und Worker, die von der Seite verwendet werden, sowie die Tracks Network, Frames, Animationen und Interactions. Noch mehr Tracks kennzeichnen die Aktivität von untergeordneten Chrome-Prozessen wie E/A, GPU und Compositor. Das sind viele Informationen! Bei den meisten Performance-Workflows geht es jedoch nur um die Informationen aus mehreren Tracks gleichzeitig.
Seit Chrome 125 gibt es einen neuen Konfigurationsmodus, mit dem Sie nicht benötigte Tracks ausblenden oder neu anordnen können. Wenn Sie beispielsweise eine langsame Interaktion optimieren, können Sie alles außer den Tracks Interaktionen, Haupt und GPU ausblenden.
Wenn Sie die Tracks bearbeiten möchten, klicken Sie mit der rechten Maustaste auf den Namen eines Titels und wählen Sie Tracks konfigurieren... aus. Dadurch wird der Konfigurationsmodus geöffnet, in dem Sie einzelne Tracks ein- und ausblenden oder neu anordnen können. Klicken Sie auf die Schaltfläche Konfiguration der Tracks abschließen, um Ihre Einstellungen zu speichern.
Mit der Konfiguration von Tracks können Sie steuern, wie der Bereich „Leistung“ wichtige Informationen in Ihrem Workflow präsentiert. Mithilfe dieser Einstellungen können Sie die Aktivität vor nicht zugehörigen Prozessen verbergen und die Tracks so verschieben, dass Sie möglichst einfach auf die benötigten Daten zugreifen können.
Zusammenfassung
Diese drei Funktionen bieten dir leistungsstarke, ergonomische Steuerelemente, mit denen du deine Workflows individuell anpassen kannst. Wenn Sie diese Funktionen nutzen und das Rauschen reduzieren, sind Sie viel besser in der Lage, das Gesuchte zu finden und die Daten sinnvoll zu nutzen.
Wir freuen uns zu hören, was gut funktioniert und was wir verbessern können. Bei Fragen oder allgemeinem Feedback kannst du dich an @ChromeDevTools wenden. Wenn etwas nicht funktioniert oder Sie einen Vorschlag für neue Funktionen haben, hinterlassen Sie einen Kommentar zu diesem offenen Problem.
Das ist erst der Anfang unserer Initiative zur Verbesserung der Performance-Tools von Chrome. Wir freuen uns, dir alles zukommen zu lassen, was wir noch zu bieten haben, um das Steuerfeld „Leistung“ nutzerfreundlicher und leistungsstärker als je zuvor zu machen. Den nächsten Post über die nächsten Funktionen finden Sie dann hier im Blog „Chrome für Entwickler“. In der Zwischenzeit können Sie sich die Seite Neu in Chrome ansehen, um über alle Neuheiten in den Entwicklertools und Chrome auf dem Laufenden zu bleiben.