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

Kayce Basques
Kayce Basques
X GitHub

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

Langfristig soll der alte JavaScript-CPU-Profiler entfernt werden und alle sollen mit dem neuen Workflow arbeiten.

In diesem kurzen 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 Steuerfeld „Profile“ verfügbar war, können Sie ihn weiterhin so aufrufen:

  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.

    Bereich „Leistung“ in den Chrome-Entwicklertools

    Abbildung 1. Der Bereich „Leistung“.

  3. Sie haben folgende Möglichkeiten:

    • Wenn Sie den Seitenaufbau analysieren möchten, klicken Sie auf Record Page Load (Seitenaufbau aufzeichnen). Die Entwicklertools starten die Aufzeichnung automatisch und beenden sie dann automatisch, wenn die Seite vollständig geladen ist.
    • Wenn Sie eine laufende Seite analysieren möchten, klicken Sie auf Aufzeichnen, führen Sie die Aktionen aus, die Sie analysieren möchten, und klicken Sie dann auf Beenden, wenn Sie fertig sind.

So wird der alte Workflow dem neuen zugeordnet

Im Screenshot unten sehen Sie die Position des Übersichtscharts zur CPU-Nutzung (oberer Pfeil) und des Flammencharts (unterer Pfeil) im neuen Workflow in der Ansicht Diagramm des alten Workflows.

Zuordnung zwischen dem Flammen-Diagramm im alten und im neuen Workflow.

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

Die Ansicht Heavy (Bottom Up) ist auf dem 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 im neuen Workflow (rechts).

Die Ansicht Baumstruktur (Top-down) ist auf dem Tab Aufrufbaum verfügbar:

Zuordnung zwischen der Baumansicht im alten und im neuen Workflow.

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