Veröffentlicht: 19. März 2025
Im Rahmen unserer fortlaufenden Berichterstattung über die Initiative zur Verbesserung der Chrome-Leistungstools können wir weitere Verbesserungen bei der Interaktion mit dem Bereich „Leistung“ in den DevTools bekannt geben. Diese Verbesserungen sollen Ihnen dabei helfen, Leistungsaufzeichnungen besser zu verwalten und irrelevante Daten zu reduzieren, damit Sie sich darauf konzentrieren können, Leistungsprobleme schnell zu finden und zu beheben.
Verbesserte Navigation
Viele Nutzer haben uns mitgeteilt, dass das Scrollen und Zoomen im Bereich „Leistung“ nicht intuitiv ist. Viele langjährige Nutzer sind daran gewöhnt, aber viele andere erwarten, dass eine Wischgeste zum Scrollen dient und nicht zum Heranzoomen und Herauszoomen der Spur.
Über eine neue Option in der können Sie zwischen dem bisherigen „klassischen“ Scrollen und dem neuen „modernen“ Ansatz wechseln.
Im klassischen Modus können Sie mit dem Touchpad oder dem Mausrad heran- und herauszoomen. Wenn Sie die Umschalttaste gedrückt halten und scrollen, können Sie im Flammendiagramm nach oben und unten scrollen.
Im neuen modernen Modus ist das umgekehrt: Durch Scrollen wird jetzt das Flammendiagramm gescrollt, während durch das Halten der Umschalttaste und Scrollen herangezoomt und herausgezoomt wird.
Tastenkombinationen wie WASD zum Navigieren im Trace funktionieren weiterhin unverändert.
Bidirektionale Übertragung – Übersicht
Oben im Bereich Leistung sehen Sie das Diagramm CPU, das Teil der Zeitachse ist. Es werden Schätzungen der CPU-Auslastung während der Aufzeichnung des Tracings aufgeschlüsselt nach Arbeitstyp angezeigt (z. B. orange für die Scriptausführung, lila für Renderingvorgänge).
Dies bietet eine Übersicht – manchmal auch als Minikarte bezeichnet – des Tracings und eine allgemeine Zusammenfassung der gesamten Zeitachse, auch wenn Sie heranzoomen, um bestimmte Probleme zu untersuchen.
Es kann jedoch leicht passieren, dass Sie Ihren genauen Standort in der Minikarte verlieren, wenn Sie sich hauptsächlich die Spur ansehen – und umgekehrt. Deshalb haben wir neue Funktionen eingeführt, mit denen Sie die Übersicht mit der herangezoomten Ansicht verknüpfen können. Wenn Sie den Mauszeiger jetzt auf die Übersicht bewegen, wird im Flammendiagramm eine entsprechende vertikale Linie angezeigt, die denselben Zeitpunkt im Flammendiagramm markiert:
Wenn Sie den Mauszeiger auf Einträge im Flammendiagramm bewegen, wird jetzt der entsprechende Teil des CPU-Diagramms hervorgehoben. So können Sie genau sehen, welche Aufgaben diese CPU-Spitzen verursachen.
Trace filtern
Beim Beheben von Leistungsproblemen müssen in der Regel große Datenmengen durchforstet werden. Damit Sie sich auf die relevantesten Informationen konzentrieren können, haben wir die Möglichkeit verbessert, Störgeräusche herauszufiltern.
Letztes Jahr haben wir die Möglichkeit eingeführt, Scripts im Bereich „Leistung“ zur Ignorierliste der DevTools hinzuzufügen, um weniger relevante Einträge im Flammendiagramm herauszufiltern. Wenn Sie beispielsweise die Leistung einer Komponente auf Ihrer Seite beheben, kann es ablenkend sein, wenn der Callstack Ihres Frameworks so tief ist, dass Sie im Bereich „Leistung“ nach oben und unten scrollen müssen. Oft möchten Sie einen Großteil dieses Callstacks minimieren, um sich auf die wichtigen Teile zu konzentrieren.
Sie können mit der rechten Maustaste auf einen Eintrag in der Flammengrafik klicken und Script zur Ignorierliste hinzufügen auswählen. Dadurch wird das Script der Ignorierliste in den DevTools hinzugefügt und alle Einträge daraus in der Flammengrafik minimiert.
Sie können die Ignorierliste jetzt auch manuell über die Schaltfläche oben im Bereich Leistung bearbeiten. Regexe in der Ignorierliste werden für alle DevTools-Sitzungen gemeinsam verwendet. Übereinstimmende Scripts werden beim Debuggen im Bereich „Quellen“ übersprungen und in der Flammengrafik zu einzelnen Einträgen zusammengefasst. Die Liste bleibt für alle DevTools-Sitzungen erhalten.
So haben Sie eine detaillierte Kontrolle darüber, welche Dateien ignoriert werden sollen, und können Regeln während der Arbeit ganz einfach aktivieren und deaktivieren.
Drittanbieter-Scripts dimmen
Scripts von Drittanbietern sind auf Websites üblich, können aber oft nicht von uns kontrolliert werden oder für eine bestimmte Debugging-Sitzung irrelevant sein. Mit der neuen Option Drittanbieter einblenden oben im Bereich „Leistung“ werden Script- und Netzwerkaktivitäten von Drittanbietern in der Zeitachse ausgegraut. So wird die visuelle Unübersichtlichkeit reduziert und Sie können sich auf die Leistung selbst erhobener Daten konzentrieren.
Manchmal möchten Sie jedoch noch mehr Kontrolle haben, z. B. sich auf einen bestimmten Drittanbieter konzentrieren oder nur Beiträge von Ihrer eigenen API oder Ihrem eigenen CDN berücksichtigen. Unten im Bereich auf dem Tab Zusammenfassung finden Sie eine Aufschlüsselung der selbst gehosteten und Drittanbieter-Scripts, die in DevTools auf der Seite gefunden werden können. Wenn Sie den Mauszeiger auf eine Entität in der Liste bewegen, werden alle Aktivitäten ausgegraut, die nicht von dieser Entität stammen.
Fazit
Mit diesen neuen Funktionen können Sie den Bereich „Leistung“ besser nutzen und unwichtige Informationen herausfiltern, um sich auf die für Sie wichtigen Teile des Tracings zu konzentrieren. Probieren Sie diese Funktionen aus und teilen Sie uns mit, wie sie weiter verbessert werden könnten oder welche anderen Verbesserungen Sie sich wünschen.