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

Kayce Basken
Kayce Basques

In Chrome 58 (derzeit Canary) wurde der Bereich „Zeitachse“ in „Leistung“ umbenannt und der Bereich „Profile“ in den Bereich „Arbeitsspeicher“ umbenannt und die Funktion „JavaScript-CPU-Profil aufzeichnen“ im Bereich „Profile“ wurde an einen versteckteren Ort verschoben.

Langfristiges Ziel ist es, den alten JavaScript-CPU-Profiler zu entfernen und alle Nutzer mit dem neuen Workflow zu 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 zugeordnet wird.

Auf den alten JavaScript-CPU-Profiler zugreifen

Wenn Sie den alten Workflow „JavaScript CPU-Profil aufzeichnen“ bevorzugen, der früher im Steuerfeld „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.

JS-Profil aufzeichnen

  1. Öffnen Sie die Entwicklertools.
  2. Klicken Sie auf den Tab Leistung.

    Der Bereich „Leistung“ in den Chrome-Entwicklertools

    Abbildung 1. Der 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 beenden sie automatisch, wenn erkannt wird, dass die Seite fertig geladen wurde.
    • 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 ist im folgenden Screenshot die Position des Diagramms zur CPU-Nutzung – Übersicht (oberer Pfeil) und des Flame-Diagramms (unterer Pfeil) im neuen Workflow zu sehen.

Zuordnung zwischen Flammendiagramm im alten und 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:

Zuordnung zwischen Bottom-up-Ansicht im alten und neuen Workflow

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:

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)