Gemeinsame Nutzung verbesserter Leistungs- und Speicherablaufverfolgungen

Die Leistungs- und Arbeitsspeichertools zeichnen Laufzeitdaten zu Ihrer Webseite auf. Das Untersuchen der aufgezeichneten Daten ermöglicht es, die Speicherauslastung oder Laufzeitleistung Ihrer Webseite zu verbessern.

Darüber hinaus können die aufgezeichneten Daten in Dateien auf dem Datenträger exportiert werden. Die exportierten Dateien werden als Ablaufverfolgungen bezeichnet.

Das Exportieren von Leistungs- und Speicherablaufverfolgungen ist nützlich, wenn Sie diese Dateien für andere Personen freigeben möchten, um Hilfe bei der Untersuchung von Problemen zu erhalten. Eine exportierte Ablaufverfolgung ist eine .json- , .heapsnapshot.heapprofile- oder .heaptimeline -Datei, die jederzeit in DevTools importiert werden kann.

Standardmäßig enthalten Ablaufverfolgungen minimale Informationen zu den Laufzeitdaten von der nachverfolgten Webseite, aber Ablaufverfolgungen können auch als erweiterte Ablaufverfolgungen als experimentelles Feature exportiert werden. Eine erweiterte Ablaufverfolgung ist eine .devtools Datei, die viel mehr Laufzeitdaten von der nachverfolgten Webseite enthält. Erweiterte Ablaufverfolgungen erleichtern die Behebung von Leistungs- und Arbeitsspeicherproblemen, indem die Umgebung, in der die Ablaufverfolgung aufgezeichnet wurde, neu erstellt und originale Quelldateien bereitgestellt werden.

Die Verwendung erweiterter Ablaufverfolgungen ermöglicht es, Quellcodeverweise, die in importierten Ablaufverfolgungen gefunden werden, zuverlässig in den tatsächlichen Laufzeitcode im Tool Quellen aufzulösen . Wenn Quellzuordnungen vorhanden waren, als eine Ablaufverfolgung aufgezeichnet wurde, oder wenn sie auf dem Azure Artifacts-Symbolserver gespeichert sind, ist es auch möglich, Codeverweise auf den ursprünglichen Quellcode aufzulösen.

Unterschiede zwischen normalen und erweiterten Ablaufverfolgungen

Normale Ablaufverfolgungen

Eine normale Ablaufverfolgung enthält nur einige der Informationen, die auf einer Webseite vorhanden sind. Ein Großteil des ursprünglichen Codes geht verloren, und nur die aufgezeichneten Leistungs- oder Arbeitsspeicherdaten der Webseite bleiben in der Ablaufverfolgung erhalten. Wenn Sie beispielsweise eine Speicherablaufverfolgung importieren, die während einer .heapsnapshot anderen DevTools-Sitzung oder auf einem anderen Computer aufgezeichnet wurde, gibt es keine Möglichkeit, von einem Objekt im Speichertool zu seinem Konstruktor im Quellentool zu wechseln.

Beim Importieren einer zuvor aufgezeichneten Leistungsablaufverfolgung im Leistungstool :

• Die Ablaufverfolgung muss auf demselben Standort und derselben Konfiguration aufgezeichnet worden sein, um aus dem Leistungsbericht dem JavaScript zugeordnet werden zu können, das im Browser ausgeführt wurde.
• Wenn sich Datei- oder Funktionsnamen seit der Aufzeichnung geändert haben, ist die Zuordnung fehleranfällig.

Erweiterte Ablaufverfolgungen

Eine erweiterte Ablaufverfolgung speichert viel mehr Informationen über die Webseite, auf der die Aufzeichnung stattgefunden hat. Beispielsweise enthält eine erweiterte Ablaufverfolgung den Ausführungskontext und die Liste der analysierten Skripts und kann optional Konsolenmeldungen, Skriptquellen und eine Momentaufnahme der DOM-Struktur enthalten.

Wenn eine erweiterte Ablaufverfolgung in DevTools importiert wird, wird ein neues DevTools-Fenster angezeigt. Dieses neue Fenster ist nicht mit der Webseite verbunden, die in Ihrem Browser ausgeführt wird, und erstellt stattdessen einen Teil der Umgebung neu, in der die Ablaufverfolgung ursprünglich aufgezeichnet wurde.

Wenn beispielsweise ein Momentaufnahme des DOM in der erweiterten Ablaufverfolgung aufgezeichnet wurde, zeigt das Tool Elemente diese Momentaufnahme an. Wenn Konsolenmeldungen aufgezeichnet wurden, gibt das Konsolentool diese Meldungen aus. Das Tool Quellen zeigt die Skripts an, die während der Aufzeichnung vorhanden waren.

Erweiterte Ablaufverfolgungen können nur in Microsoft Edge importiert werden, während normale Ablaufverfolgungen mit anderen Browsern kompatibel sind, die auf der Chromium-Engine basieren.

Festlegen des Standardablaufverfolgungstyps

Standardmäßig exportieren die Leistungs - und Speichertools Daten als normale Ablaufverfolgungen, aber Sie können den Standardablaufverfolgungstyp auf enhancedfestlegen.

So ändern Sie den Ablaufverfolgungstyp:

1. Öffnen Sie DevTools, indem Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS) drücken.

2. Klicken Sie in DevTools oben rechts auf Einstellungen (). Einstellungen wird geöffnet, wobei die Seite Einstellungen ausgewählt ist.

3. Aktivieren Sie im Abschnitt Persistenz der Seite Einstellungen das Kontrollkästchen Erweiterte Leistung und Speicherablaufverfolgungen exportieren :

   

4. Erweiterte Ablaufverfolgungen können optional auch Konsolennachrichten, Skriptquellen und DOM-Elemente enthalten. Verwenden Sie die folgenden Kontrollkästchen, um zu steuern, was in erweiterte Ablaufverfolgungen eingeschlossen werden soll:

   • Schließen Sie die Konsolennachricht in erweiterte Ablaufverfolgungen ein.
   • Schließen Sie Skriptquellen in erweiterte Ablaufverfolgungen ein.
   • Schließen Sie DOM-Momentaufnahmen in erweiterte Ablaufverfolgungen (experimentell) ein.

   

Exportieren einer Ablaufverfolgung aus dem Leistungstool

So exportieren Sie eine Leistungsaufzeichnung aus dem Leistungstool :

1. Öffnen Sie das Leistungstool .

2. Klicken Sie auf Aufzeichnen , und führen Sie das Szenario aus, in dem Sie die Leistung untersuchen möchten, indem Sie mit der Webseite interagieren, und klicken Sie dann auf Beenden.

3. Wenn das Leistungsprofil angezeigt wird, klicken Sie auf Profil speichern ():

   

4. Wählen Sie einen Speicherort zum Speichern der Ablaufverfolgungsdatei auf Ihrem Datenträger aus:

   

   Die Ablaufverfolgung ist eine .json Datei, wenn Sie den Standardablaufverfolgungstyp auf normal festlegen, und es ist eine .devtools Datei, wenn Sie den Standardablaufverfolgungstyp auf erweitert festlegen.

Exportieren einer Ablaufverfolgung aus dem Speichertool

So exportieren Sie Speicherinformationen aus dem Speichertool :

1. Öffnen Sie das Speichertool .

2. Wählen Sie den Gewünschten Speicheraufzeichnungstyp aus, z. B. Heapmomentaufnahme. Die folgenden Anweisungen sind ähnlich, wenn Sie einen anderen Speicheraufzeichnungstyp auswählen. Weitere Informationen zu den verschiedenen Speicheraufzeichnungstypen finden Sie unter Beheben von Speicherproblemen.

3. Klicken Sie auf Momentaufnahme erstellen.

4. Wenn die Momentaufnahme aufgezeichnet wird, klicken Sie auf der Seitenleiste des Speichertools auf die Schaltfläche Speichern:

   

5. Wählen Sie einen Speicherort zum Speichern der Ablaufverfolgungsdatei auf Ihrem Datenträger aus:

   

   Die Ablaufverfolgung ist eine .heapsnapshot- , .heapprofile- oder .heaptimeline -Datei, wenn Sie den Standardablaufverfolgungstyp auf normal festlegen, und es ist eine .devtools Datei, wenn Sie den Standardablaufverfolgungstyp auf erweitert festlegen.

Auswählen eines Ablaufverfolgungstyps beim Exportieren

Ablaufverfolgungen werden abhängig von der Option Erweiterte Leistung und Speicherablaufverfolgungen exportieren als normale oder erweiterte Ablaufverfolgungen exportiert. Informationen zum Ändern des Standardablaufverfolgungstyps finden Sie unter Festlegen des Standardablaufverfolgungstyps. Sie können beim Exportieren auch den gewünschten Ablaufverfolgungstyp auswählen.

So wählen Sie beim Export einen anderen Ablaufverfolgungstyp aus:

1. Klicken Sie im Leistungstool mit der rechten Maustaste auf das Profil speichern (oder halten Sie die STRG-TASTE gedrückt, und klicken Sie auf die ) oder im Speichertool auf die Schaltfläche Speichern.

2. Klicken Sie entweder auf .devtools (erweitertes Format für Microsoft Edge), wenn Sie eine erweiterte Ablaufverfolgung exportieren möchten, oder klicken Sie auf .json (funktioniert mit Microsoft Edge und Chromium Browsern), wenn Sie eine normale Ablaufverfolgung wünschen.

   

Importieren einer Ablaufverfolgung im Leistungstool

So importieren Sie eine Ablaufverfolgung im Leistungstool :

1. Öffnen Sie das Leistungstool .

2. Klicken Sie auf Profil laden ():

   

3. Suchen Sie die Ablaufverfolgungsdatei auf Ihrem Datenträger. Es ist entweder eine .devtools Datei (für erweiterte Ablaufverfolgungen) oder eine .json Datei (für normale Ablaufverfolgungen):

   

4. Öffnen Sie die Datei.

   Wenn es sich bei der Datei um eine erweiterte Ablaufverfolgung handelt, wird ein neues DevTools-Fenster mit dem Leistungsprofil und den zusätzlichen Laufzeitinformationen angezeigt, die in den Tools Quellen, Konsole und Elemente aufgezeichnet wurden.

   Wenn es sich bei der Datei um eine normale Ablaufverfolgung handelt, wird das Leistungsprofil im Leistungstool angezeigt, und auf den restlichen Registerkarten von DevTools werden weiterhin Informationen zur aktuellen Webseite angezeigt.

Importieren einer Ablaufverfolgung im Speichertool

So importieren Sie eine Ablaufverfolgung im Speichertool :

1. Öffnen Sie das Speichertool .

2. Klicken Sie auf die Schaltfläche Profil laden :

   

3. Suchen Sie die Ablaufverfolgungsdatei auf Ihrem Datenträger. Es handelt sich entweder um eine .devtools Datei (für erweiterte Ablaufverfolgungen) oder eine .heapsnapshot- , .heaptimeline- oder .heapprofile -Datei (für normale Ablaufverfolgungen).

   

4. Öffnen Sie die Datei.

   Wenn es sich bei der Datei um eine erweiterte Ablaufverfolgung handelt, wird ein neues DevTools-Fenster mit den Speicherinformationen und den zusätzlichen Laufzeitinformationen angezeigt, die in den Tools Quellen, Konsole und Elemente aufgezeichnet wurden.

   Wenn es sich bei der Datei um eine normale Ablaufverfolgung handelt, werden die Speicherinformationen im Speichertool angezeigt, und auf den restlichen Registerkarten von DevTools werden weiterhin Informationen zur aktuellen Webseite angezeigt.

Feedback zu erweiterten Ablaufverfolgungen teilen

Erweiterte Ablaufverfolgungen sind ein experimentelles Feature, das die Zusammenarbeit bei der Behebung von Leistungs- und Speicherproblemen durch das Anzeigen von nicht minimiertem Code erleichtert.

Das Microsoft Edge DevTools-Team freut sich über feedback zu erweiterten Ablaufverfolgungen. Wenn Sie dieses neue Feature ausprobiert haben, können Sie probleme oder Ideen dazu in unserem GitHub-Repository melden.