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

Kayce Basques

In Chrome 58, der derzeit als Canary-Version verfügbar ist, wurde das Steuerfeld „Zeitachse“ in „Leistung“ umbenannt, das Steuerfeld „Profile“ in „Arbeitsspeicher“ und die Funktion „JavaScript-CPU-Profil aufzeichnen“ im Steuerfeld „Profile“ an eine weniger sichtbare Stelle verschoben.

Langfristig soll der alte JavaScript-CPU-Profiler entfernt und alle Nutzer auf den neuen Workflow umgestellt werden.

In diesem kleinen Migrationsleitfaden 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 früher im Bereich „Profile“ verfügbar war, können Sie 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.

    Im Bereich „Leistung“ der Chrome DevTools
    Abbildung 1. Im Bereich „Leistung“.

  3. Sie haben folgende Möglichkeiten:

    • Klicken Sie auf Seitenaufruf erfassen, um ein Seitenprofil zu erstellen. Die Aufzeichnung wird automatisch gestartet und beendet, sobald die Seite vollständig geladen ist.
    • Wenn Sie eine laufende Seite profilieren möchten, klicken Sie auf Aufzeichnen, führen Sie die Aktionen aus, die Sie profilieren möchten, und klicken Sie dann auf Beenden.

Zuordnung des alten Workflows zum neuen

Der Screenshot unten zeigt die Position des Diagramms zur CPU-Auslastung (oberer Pfeil) und des Flammendiagramms (unterer Pfeil) im neuen Workflow in der Ansicht Diagramm des alten Workflows.

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

Die Ansicht Hoch (Bottom-Up) ist auf dem Tab Bottom-Up verfügbar:

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

Die Ansicht Baumstruktur (Top-Down) ist auf dem Tab Anrufbaum verfügbar:

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

Wenn wir eine Funktion vergessen haben oder Sie weitere Fragen zu diesem Artikel haben, können Sie sich auf Twitter an @ChromeDevTools wenden oder ein GitHub-Problem in unserem Docs-Repository melden.