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

Kayce Basques

In Chrome 58 (derzeit Canary) wurde der Bereich „Zeitachse“ in den Bereich „Leistung“ umbenannt. Der Bereich „Profile“ wurde in den Bereich „Arbeitsspeicher“ umbenannt und die Funktion „JavaScript-CPU-Profil aufzeichnen“ im Bereich „Profile“ wurde an einen versteckteren 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.

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 entspricht, den Sie gewohnt sind.

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 weiterhin so 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.

JS-Profil aufzeichnen

  1. Öffnen Sie die Entwicklertools.

  2. Klicken Sie auf den Tab Leistung.

    Leistungsbereich der Chrome-Entwicklertools
    Abbildung 1. Bereich „Leistung“

  3. Sie haben folgende Möglichkeiten zum Aufnehmen:

    • Um ein Profil für einen Seitenaufbau zu erstellen, klicken Sie auf Seitenaufbau aufzeichnen. Mit den Entwicklertools wird die Aufzeichnung automatisch gestartet und automatisch beendet, wenn erkannt wird, dass die Seite vollständig geladen ist.
    • Wenn Sie ein Profil für eine laufende Seite erstellen möchten, klicken Sie auf Aufzeichnen, führen Sie die gewünschten Aktionen aus und klicken Sie auf Beenden, wenn Sie fertig sind.

Zuordnung des alten Workflows zum neuen

Der folgende Screenshot zeigt in der Diagrammansicht des alten Workflows die Position des Übersichtsdiagramms zur CPU-Nutzung (oberer Pfeil) und des Flame-Diagramms (unterer Pfeil) im neuen Workflow.

Zuordnung zwischen Flame-Diagramm im alten und im neuen Workflow.
Abbildung 2: Zuordnung zwischen dem Flame-Diagramm im alten Workflow (links) und dem neuen Workflow (rechts).

Die Ansicht Stark (Bottom-up) ist im Tab Bottom-up verfügbar:

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

Die Ansicht Baum (von oben nach unten) ist über den Tab Aufrufstruktur verfügbar:

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

Wenden Sie sich an @ChromeDevTools auf Twitter oder stellen Sie ein GitHub-Problem in unserem Dokumentations-Repository, wenn wir Funktionen übersehen haben oder wenn Sie weitere Fragen zu diesem Artikel haben.