Kommt Ihnen das bekannt vor? Sie beheben ein Leistungsproblem in den Chrome-Entwicklertools. Aufgrund der überwältigenden Menge an Informationen im Bereich „Leistung“ ist es jedoch schwierig, sich nur 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. Das Steuerfeld „Leistung“ ist unglaublich leistungsstark, 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 Flammendiagramms 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 in Millisekunden gemessen. Selbst wenn Ihre Leistungsaufzeichnung nur wenige Sekunden lang ist, gibt es viele Möglichkeiten, den Überblick zu verlieren.
In Chrome 122 haben wir die Möglichkeit hinzugefügt, Brotkrümmel zu erstellen. 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. Das Eingrenzen der Zeitachse kann besonders hilfreich sein, wenn Sie beispielsweise Probleme mit der Reaktionsfähigkeit beheben möchten. So können Sie sich auf eine einzelne Interaktion oder eine langwierige Aufgabe konzentrieren.
Der vorherige Screenshot zeigt eine Nahaufnahme der Zeitachse, auf der die Hauptthread-Aktivitäten wie die Scriptausführung und die 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 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 diesen Vorgang nach Bedarf, um in einen verschachtelten Bereich hineinzuzoomen.
- Klicken Sie auf die Breadcrumbs, um zu vorherigen Bereichen oder zum gesamten Bereich der Zeitachse zurückzukehren.
Wenn Sie die Zeitachse zuschneiden, können Sie nicht versehentlich zu einem irrelevanten Teil der Zeitachse scrollen. Sie können aber jederzeit auf die Breadcrumbs klicken, um herauszuzoomen. Ein weiterer Vorteil ist, dass die Zeitachse immer mit den folgenden Tracks übereinstimmt. So lassen sich Leistungsverbesserungen wie erzwungene Neuformatierungen viel einfacher erkennen und die Ursache im Flammendiagramm ermitteln.
Unwichtige Teile des Flammendiagramms ausblenden
Die Analyse der Hauptthread-Aktivität ist keine einfache Aufgabe. Dieser Teil des Bereichs „Leistung“ wird aufgrund der langen und dünnen Aufrufabfolgen als Flaschendiagramm bezeichnet. In extremen Fällen können diese Stacks so unübersichtlich sein, dass es schwierig ist, den Überblick zu behalten und sich auf das zu konzentrieren, was Sie optimieren möchten.
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 im Flammendiagramm 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 Funktionen werden nach oben verschoben und erscheinen direkt nach der übergeordneten Funktion.
- Untergeordnete Elemente ausblenden: Das Flammendiagramm wird an der ausgewählten Funktion beschnitten und alle untergeordneten Elemente werden ausgeblendet.
- Wiederkehrende untergeordnete Elemente ausblenden: Alle Instanzen der ausgewählten Funktion werden aus dem Rest des Flammendiagramms 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 später im Stack ausblenden
- U: Die ausgeblendeten untergeordneten Elemente der ausgewählten Funktion werden angezeigt.
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 Script wird auch der Ignorierliste hinzugefügt, die der DevTools-Debugger verwendet, um Funktionen zu überspringen und Ausnahmen zu ignorieren, die aus dem Script stammen.
Scripts, die der Ignorierliste hinzugefügt wurden, werden beibehalten und in neuen Protokollen weiterhin im Flammendiagramm ausgeblendet. Scripts, die nicht unter Ihrer Kontrolle stehen, sind 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 Flammendiagramm wiederherstellen möchten, können Sie über das Kontextmenü die untergeordneten Elemente der ausgewählten Funktion oder alle ausgeblendeten Funktionen im gesamten Trace zurücksetzen. Funktionen mit ausgeblendeten untergeordneten Elementen sind mit dem Symbol ▼ gekennzeichnet. Wenn Sie darauf klicken, werden die untergeordneten Elemente zurückgesetzt.
Je weniger unnötige Details und Komplexität das Flammendiagramm enthält, desto nutzerfreundlicher ist es. Die Möglichkeit, bei Bedarf anzupassen, welche Einträge angezeigt werden, ist eine ergonomische Verbesserung, mit der Sie sich auf die wichtigsten Informationen für die jeweilige Aufgabe konzentrieren können.
Irrelevanten Datensätze ausblenden
Die Aktivität des Hauptthreads ist nur ein Track im Bereich „Leistung“. Die Tracks im Bereich „Leistung“ visualisieren die Aktivitäten eines Prozesses. Sie sind alle auf einer gemeinsamen Zeitachse ausgerichtet, um das Debugging 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 viele 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.
Wenn Sie die Tracks bearbeiten möchten, klicken Sie 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 Titel ein- und ausblenden oder neu anordnen können. Klicken Sie auf die Schaltfläche Konfiguration der 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
Mit diesen drei Funktionen stehen Ihnen leistungsstarke neue ergonomische Steuerelemente zur Verfügung, mit denen Sie Ihre Leistungsworkflows 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.
Wir würden uns freuen, wenn Sie uns mitteilen, was gut funktioniert oder was wir verbessern können. Wenn Sie Fragen oder allgemeines Feedback haben, können Sie sich unter @ChromeDevTools an uns wenden. Wenn etwas nicht funktioniert oder du einen Vorschlag für neue Funktionen hast, hinterlasse einen Kommentar unter 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 auf der Seite Neu in Chrome über alle Neuigkeiten in den DevTools und Chrome informieren.