Kommt Ihnen das bekannt vor? Sie sind dabei, ein Leistungsproblem in den Chrome-Entwicklertools zu beheben, aber die überwältigende Menge an Informationen im Bereich „Leistung“ macht es schwierig, sich auf die relevantesten und umsetzbaren Teile zu konzentrieren. Aufgrund der Länge der Zeitachse, der Detaillierung des Flammendiagramms und der Breite der vielen verschiedenen Datentracks kann die Navigation eine Herausforderung sein. So unglaublich leistungsstark das Steuerfeld „Leistung“ auch ist, aber seine Nützlichkeit sollte nicht auf Kosten der Nutzerfreundlichkeit gehen.
Im Rahmen unserer Initiative zur Verbesserung der Leistungstools von Chrome haben wir vor Kurzem drei neue Funktionen eingeführt, mit denen die Informationsdichte reduziert und Entwicklern die Anpassung ihrer Workflows erleichtert werden soll:
- Irrelevante Teile der Zeitachse ausblenden
- Irrelevante Teile des Flame-Diagramms ausblenden
- Irrelevante Tracks ausblenden
In diesem Beitrag sehen wir uns diese Funktionen genauer an und zeigen, wie Sie sie nutzen können, um sich auf die wichtigsten Informationen zu konzentrieren.
Unwichtige Teile der Zeitachse ausblenden
Die Webleistung wird im Millisekundenbereich gemessen. Selbst wenn die Aufzeichnung des Geschehens nur wenige Sekunden dauert, gibt es also zahlreiche 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 Grenzen der Zeitachse festlegen, sodass Sie nur innerhalb eines von Ihnen festgelegten Bereichs zoomen oder schwenken können. Diese Beschränkung der Zeitachse kann besonders nützlich sein, wenn Sie beispielsweise Responsivitätsprobleme beheben möchten, damit Sie sich auf eine einzelne Interaktion oder problematische lange Aufgabe konzentrieren können.
Der vorherige Screenshot zeigt eine Nahaufnahme der Zeitleiste, in der Aktivitäten des Hauptthreads wie Skriptausführung und Präsentationsarbeit visualisiert werden. Wenn Sie den Mauszeiger darauf bewegen, wird eine neue Schaltfläche angezeigt, mit der Sie die Zeitachse auf das aktuelle Fenster festlegen. Die Schaltfläche ist mit der Breite des Zeitfensters in Millisekunden und dem Symbol gekennzeichnet. Die Breadcrumbs befinden sich über der Zeitachse und sind jeweils mit der Größe des Zeitfensters gekennzeichnet.
So verwenden Sie dieses Feature:
- Zoomen und schwenken Sie die Zeitachse auf ein interessantes Gebiet.
- Klicken Sie in der Zeitachsenübersicht auf das Lupensymbol , um die Zeitachse zu fixieren und einen Breadcrumb-Link festzulegen.
- Wiederholen Sie diese Schritte bei Bedarf, um einen verschachtelten Bereich, der Sie interessiert, heranzuzoomen.
- Klicken Sie auf die Breadcrumbs, um zu vorherigen Bereichen oder zum gesamten Bereich der Zeitachse zurückzukehren.
Wenn Sie die Zeitachse zuschneiden, wird verhindert, dass Sie versehentlich zu einem irrelevanten Teil der Zeitachse scrollen. Sie können aber jederzeit auf die Wegweiser klicken, um herauszuzoomen. Ein weiterer Vorteil ist, dass die Zeitachse an den folgenden Tracks angeglichen wird. So lassen sich Leistungsverbesserungen wie erzwungene Neuformatierungen viel leichter erkennen und die Ursache im Flammendiagramm ermitteln.
Irrelevante Teile des Flame-Diagramms ausblenden
Das Analysieren der Aktivitäten des Hauptthreads ist keine leichte Aufgabe. Dieser Teil des Steuerfelds „Leistung“ wird als Flame-Diagramm bezeichnet, weil die Aufrufstacks so lang und kurzlebig werden können. In einigen extremen Fällen können diese Stacks so unübersichtlich sein, dass es schwierig ist, den Sinn des Ganzen zu verstehen und sich auf das zu konzentrieren, was optimiert werden soll.
Ab Chrome 124 können Sie genau festlegen, welche Einträge im Flammendiagramm ausgeblendet werden sollen, damit Sie sich auf die relevantesten Informationen konzentrieren können.
Wenn Sie mit der rechten Maustaste auf eine Funktion im Flame-Diagramm klicken, wird ein Kontextmenü mit mehreren Optionen zum Ausblenden von Einträgen angezeigt:
- Funktion ausblenden: Entfernt die ausgewählte Funktion aus dem Flame-Diagramm. Die untergeordneten Funktionen werden nach oben verschoben und erscheinen direkt nach der übergeordneten Funktion.
- Untergeordnete Elemente ausblenden: Das Flame-Diagramm wird bei der ausgewählten Funktion bereinigt und alle untergeordneten Funktionen ausgeblendet.
- Wiederkehrende untergeordnete Funktion ausblenden: Alle Instanzen der ausgewählten Funktion werden aus dem Rest des Flame-Diagramms entfernt.
Wenn eine Funktion ausgewählt ist, stehen Ihnen auch mehrere nützliche Tastenkombinationen zur Verfügung:
- H: die ausgewählte Funktion ausblenden
- C: Die untergeordneten Elemente der ausgewählten Funktion ausblenden
- R: Instanzen der ausgewählten Funktion werden später im Stack ausgeblendet.
- U: Ausgeblendete untergeordnete Elemente der ausgewählten Funktion einblenden
Irrelevante Scripts dauerhaft ausblenden
Mit der Option Script zur Ignorierliste hinzufügen wird die ausgewählte Funktion sowie alle anderen Funktionen, die in derselben Scriptdatei definiert sind, im Flammendiagramm ausgeblendet. Das Skript wird außerdem der Liste zu ignorierender Nutzer hinzugefügt, mit der der Entwicklertools-Debugger Funktionen überspringt und Ausnahmen vom Skript ignoriert.
Skripts, die der Ignorierliste hinzugefügt wurden, bleiben erhalten, sodass sie in neuen Traces weiterhin im Flame-Diagramm ausgeblendet sind. Skripts, auf die Sie keinen Einfluss haben, wären gute Kandidaten für die Ignorierliste. Das Ausblenden einzelner Funktionen ist dagegen nur für die aktuelle Trace-Datei gültig und eher situationsabhängig. So können Sie beispielsweise einen unübersichtlichen Stapel von rekursiven Funktionsaufrufen ausblenden, um die Arbeit mit der Ablaufverfolgung zu erleichtern.
Wenn Sie die Ignorierliste oder andere ausgeblendete Funktionen im Flame-Diagramm zurücksetzen möchten, können Sie das Kontextmenü verwenden, um die untergeordneten Elemente der ausgewählten Funktion oder alle ausgeblendeten Funktionen im Trace zurückzusetzen. Funktionen mit ausgeblendeten untergeordneten Elementen werden mit dem Symbol ▼ gekennzeichnet, das auch die untergeordneten Elemente zurückgesetzt, wenn darauf geklickt wird.
Jede unnötige Tiefe und Komplexität, die Sie aus dem Flame-Diagramm entfernen können, macht es umso nutzerfreundlicher. Die Möglichkeit, die angezeigten Einträge anzupassen, ist eine ergonomische Verbesserung, damit du dich auf die wichtigsten Informationen für die jeweilige Aufgabe konzentrieren kannst.
Irrelevante Titel ausblenden
Die Aktivität des Hauptthreads ist nur ein Track im Bereich „Leistung“. Die Tracks im Bereich „Leistung“ visualisieren die Aktivität eines Prozesses und sind alle auf eine gemeinsame Zeitachse ausgerichtet, um die Fehlerbehebung zu erleichtern. Neben dem Haupt-Track gibt es einzelne Tracks für die anderen Subframes, Threads und Worker, die von der Seite verwendet werden, sowie die Tracks Netzwerk, Frames, Animationen und Interaktionen. Weitere Tracks markieren die Aktivitäten von Chrome-Prozessen auf niedrigerer Ebene wie E/A, GPU und Compositor. Das sind eine Menge Informationen! Bei den meisten Leistungs-Workflows interessieren Sie sich jedoch nur für die Informationen aus wenigen Tracks gleichzeitig.
Seit Chrome 125 gibt es einen neuen Konfigurationsmodus, mit dem Sie nicht benötigte Titel ausblenden oder nach Belieben neu anordnen können. Wenn Sie beispielsweise eine langsame Interaktion optimieren, können Sie alles außer den Tracks Interaktionen, Haupt und GPU ausblenden.
Klicken Sie zum Bearbeiten der Tracks mit der rechten Maustaste auf den Namen eines Tracks und wählen Sie Tracks konfigurieren... aus. Dadurch wird der Konfigurationsmodus geöffnet, in dem Sie einzelne Tracks ein-, ausblenden oder neu anordnen können. Klicken Sie auf die Schaltfläche Konfiguration von Tracks abschließen, um Ihre Einstellungen zu speichern.
Wenn Sie Tracks konfigurieren, können Sie festlegen, wie wichtige Informationen für Ihren Workflow im Bereich „Leistung“ angezeigt werden. Mit diesen Einstellungen können Sie die Aktivitäten vor nicht zugehörigen Prozessen ausblenden und die Tracks so verschieben, dass Sie den einfachsten Zugriff auf die benötigten Daten haben.
Zusammenfassung
Diese drei Funktionen bieten Ihnen leistungsstarke neue ergonomische Steuerelemente, mit denen Sie Ihre Leistungs-Workflows anpassen können. Wenn Sie diese Funktionen nutzen und die Menge an Rauschen reduzieren, können Sie viel besser das finden, wonach Sie suchen, und die Daten auswerten.
Uns interessiert, was gut funktioniert und was wir noch verbessern können. Wenn Sie Fragen oder allgemeines Feedback haben, können Sie sich unter @ChromeDevTools an uns wenden. Wenn etwas nicht funktioniert oder Sie Vorschläge für neue Funktionen haben, hinterlassen Sie einen Kommentar zu diesem offenen Problem.
Das ist erst der Anfang unserer Initiative zur Verbesserung der Leistungstools von Chrome. Wir freuen uns, Ihnen bald weitere Neuigkeiten zu präsentieren, mit denen wir das Steuerfeld „Leistung“ noch nutzerfreundlicher und leistungsfähiger machen. Den nächsten Beitrag mit den nächsten Funktionen veröffentlichen wir hier im Chrome für Entwickler-Blog. In der Zwischenzeit können Sie sich die Seite Neu in Chrome ansehen, um über alle Neuerungen in den Entwicklertools und zu Chrome auf dem Laufenden zu bleiben.