Chrome-Entwicklertools – JavaScript-CPU-Profilerstellung in Chrome 58

Kayce Basques

Twitter GitHub Glitch

In Chrome 58 (derzeit Canary) wurde der Bereich „Zeitachse“ in „Leistung“ umbenannt, der Bereich „Profile“ in das Feld „Speicher“ umbenannt und die Funktion zum Aufzeichnen von JavaScript-CPU-Profilen im Bereich „Profile“ wurde an einen verborgeneren Ort verschoben.

Das langfristige Ziel besteht darin, den alten JavaScript-CPU-Profiler zu entfernen und dafür zu sorgen, dass alle mit dem neuen Workflow arbeiten können.

In dieser kleinen Migrationsanleitung erfahren Sie, wie Sie ein JS-Profil im Steuerfeld „Leistung“ aufzeichnen und wie die Benutzeroberfläche des Steuerfelds „Leistung“ dem alten Workflow zugeordnet wird.

Auf den alten JavaScript-CPU-Profiler zugreifen

Wenn Sie den alten Workflow „JavaScript CPU-Profil aufzeichnen“ bevorzugen, der bisher im Bereich „Profile“ verfügbar war, können Sie wie folgt darauf zugreifen:

1. Öffnen Sie das Hauptmenü der Entwicklertools.
2. Wählen Sie Weitere Tools > JavaScript Profiler aus. Der alte Profiler wird in einem neuen Bereich namens JavaScript Profiler geöffnet.

Warnung: Das langfristige Ziel ist es, alle Nutzer zum neuen Workflow zu migrieren. Dieser Workflow wird in zukünftigen Versionen der Entwicklertools möglicherweise entfernt.

JS-Profil aufzeichnen

1. Öffnen Sie die Entwicklertools.

2. Klicken Sie auf den Tab Leistung.

   

   Abbildung 1: Bereich „Leistung“

3. Sie haben folgende Möglichkeiten für die Aufzeichnung:

   • Klicken Sie auf Seitenaufbau aufzeichnen, um ein Profil für einen Seitenaufbau zu erstellen. Die Entwicklertools starten die Aufzeichnung automatisch und werden beendet, wenn erkannt wird, dass die Seite fertig geladen ist.
   • Wenn Sie ein Profil für eine laufende Seite erstellen möchten, klicken Sie auf Aufzeichnen, führen Sie die Aktionen aus, für die ein Profil erstellt werden soll, und klicken Sie auf Beenden, wenn Sie fertig sind.

So wird der alte Workflow dem neuen Workflow zugeordnet

In der Diagrammansicht des alten Workflows sehen Sie im folgenden Screenshot die Position des Diagramms zur CPU-Nutzung – Übersicht (oberer Pfeil) und des Flame-Diagramms (unterer Pfeil) im neuen Workflow.

Abbildung 2: Zuordnung zwischen Flammendiagramm im alten Workflow (links) und neuem Workflow (rechts)

Die Ansicht Heavy (Bottom-up) ist auf dem Tab Bottom-up verfügbar:

Abbildung 3: Zuordnung zwischen der Bottom-up-Ansicht im alten Workflow (links) und dem neuen Workflow (rechts).

Die Ansicht Baum (Top Down) ist auf dem Tab Aufrufstruktur verfügbar:

Abbildung 4: Zuordnung zwischen der Baumansicht im alten Workflow (links) und dem neuen Workflow (rechts).

Senden Sie einen Ping an @ChromeDevTools auf Twitter oder öffnen Sie ein GitHub-Problem in unserem Dokumenten-Repository, wenn wir Funktionen übersehen haben oder Sie weitere Fragen zu diesem Artikel haben.