Freigeben über

Freigeben einer Leistungsablaufverfolgung mit mehr Daten

Die vom Leistungstool aufgezeichneten Daten können in Dateien auf einem Datenträger exportiert werden, die auch Anmerkungen, Ressourceninhalte (HTML-, CSS- und JavaScript-Inhalt) und Quellzuordnungen enthalten können. Die exportierten Dateien werden als Ablaufverfolgungen bezeichnet. Eine exportierte Ablaufverfolgung ist eine .json Datei, die jederzeit in DevTools importiert werden kann.

Wenn Sie eine Ablaufverfolgung aus dem Leistungstool exportieren, können Sie auswählen, ob zusätzliche Daten eingeschlossen werden sollen:

  • Anmerkungen.
  • Ressourceninhalte (z. B. HTML-, CSS- und JavaScript-Inhalt).
  • Skriptquellzuordnungen.

Sie können auch steuern, ob die Ablaufverfolgungsdatei komprimiert ist.

Das Leistungstool zeichnet Laufzeitdaten zu Ihrer Webseite auf. Das Untersuchen der aufgezeichneten Daten ermöglicht es, die Laufzeitleistung Ihrer Webseite zu verbessern.

Das Exportieren von Leistungsablaufverfolgungen ist nützlich, wenn Sie diese Dateien für andere Personen freigeben möchten, um Hilfe bei der Untersuchung von Problemen zu erhalten.

Ablaufverfolgungen können gespeichert werden, um Anmerkungen, Ressourceninhalte (z. B. Skripts) und Quellzuordnungen von der Webseite einzuschließen. Diese zusätzlichen Informationen erleichtern die Analyse einer importierten Ablaufverfolgungsdatei, indem die Umgebung, in der die Ablaufverfolgung aufgezeichnet wurde, neu erstellt und originale Quelldateien bereitgestellt werden.

Exportierte Ablaufverfolgungsdateien sind mit anderen Browsern kompatibel, die auf der Chromium-Engine basieren.

Wenn eine Ablaufverfolgung, die Anmerkungen, Ressourceninhalte (z. B. Skripts) oder Quellzuordnungen enthält, 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. Diese DevTools-instance enthält nur die Leistungs- und Quellentools.

Exportieren einer Ablaufverfolgung aus dem Leistungstool

So erfassen Sie die Leistung für Aspekte einer Webseite und exportieren dann eine Leistungsaufzeichnung:

  1. Öffnen Sie eine Webseite, z . B. To do, in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Öffnen Sie in DevTools das Tool Leistung (Leistungssymbol).

  4. Klicken Sie auf die Schaltfläche Datensatz (Datensatzsymbol).

  5. Interagieren Sie mit der Webseite, um das Szenario auszuführen, in dem Sie die Leistung untersuchen möchten.

    Geben Sie beispielsweise auf der Demoseite im Textfeld Aufgabe hinzufügen den Text ein task 1, und drücken Sie dann die EINGABETASTE.

  6. Klicken Sie auf die Schaltfläche Beenden (Symbol ").

    Das Leistungsprofil wird angezeigt.

  7. Klicken Sie auf die Schaltfläche Ablaufverfolgung speichern (Symbol ").

    Das Dialogfeld Leistungsablaufverfolgung speichern wird geöffnet (im Leistungstool ):

    Dialogfeld

  8. Aktivieren oder deaktivieren Sie die Kontrollkästchen, um zu steuern, welche Informationen in die Ablaufverfolgungsdatei aufgenommen werden sollen:

    • Das Kontrollkästchen Anmerkungen einschließen . Dieses Kontrollkästchen wird nur angezeigt, wenn Anmerkungen vorhanden sind.

    • Das Kontrollkästchen Ressourceninhalt einschließen .

    • Das Kontrollkästchen Skriptquellzuordnungen einschließen . (Aktivieren Sie zuerst das Kontrollkästchen Ressourceninhalt einschließen .)

    Deaktivieren Sie optional das Kontrollkästchen Komprimieren mit gzip .

    Details zu diesen Kontrollkästchen finden Sie unten.

  9. Klicken Sie auf die Schaltfläche Speichern .

    Das kleine Dialogfeld im Leistungstool wird geschlossen, und das Dialogfeld Speichern unter wird geöffnet.

  10. Navigieren Sie zu einem Ordner, in dem die Ablaufverfolgungsdatei auf Ihrem Datenträger gespeichert werden soll.

    Klicken Sie unter Windows beispielsweise im /Downloads/ Verzeichnis auf die Schaltfläche Neuer Ordner , und erstellen Sie dann ein /traces/ Verzeichnis, in dem die Leistungsablaufverfolgungsdatei gespeichert werden soll:

    Ordner

  11. Akzeptieren oder ändern Sie den Dateinamen, z Trace-20251103T154500.json. B. .

  12. Klicken Sie auf die Schaltfläche Speichern .

    Die Leistungsablaufverfolgungsdatei wird gespeichert, z C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json. B. .

Anmerkungen einschließen

Im Dialogfeld Leistungsablaufverfolgung speichern im Leistungstool steuert das Kontrollkästchen Anmerkungen einschließen , ob Anmerkungen eingeschlossen werden sollen, die einem Leistungsprofil hinzugefügt wurden.

Anmerkungen helfen dabei, die Aufmerksamkeit auf bestimmte Abschnitte einer Ablaufverfolgung zu lenken und hervorzuheben, sodass Details beim Anzeigen der Ablaufverfolgung leichter zu verstehen sind.

Siehe auch:

Ressourceninhalt einschließen

Aktivieren Sie im Dialogfeld Leistungsablaufverfolgung speichern im Leistungstool das Kontrollkästchen Ressourceninhalt einschließen , um den Inhalt von HTML-Dateien, CSS-Dateien und JavaScript-Skripts in der exportierten Ablaufverfolgungsdatei einzuschließen. Alle geladenen Skripts (mit Ausnahme von Erweiterungen) werden in der Ablaufverfolgungsdatei gespeichert.

Wenn die Ablaufverfolgungsdatei anschließend in DevTools importiert wird, können diese Ressourcen dann im Quellentool angezeigt werden. Das Tool Quellen löst Quellcodeverweise auf, die in der importierten Ablaufverfolgung gefunden werden, um den ursprünglichen Quellcode anzuzeigen.

Erweiterungsskripts

Einige Leistungserkenntnisse erfordern Ressourceninhalte (z. B. Skripts) für die Analyse. Der Inhalt von Erweiterungsskripts ist nicht in der Ablaufverfolgungsdatei enthalten, auch wenn dieses Kontrollkästchen aktiviert ist, da Erweiterungsskripts möglicherweise vertrauliche Informationen enthalten.

Die Profilerstellungsdaten aus Erweiterungsskripts werden jedoch weiterhin in der Ablaufverfolgungsdatei gespeichert, da Erweiterungsskripts die Leistung beeinträchtigen können.

Siehe auch:

Einschließen von Skriptquellzuordnungen

Aktivieren Sie im Dialogfeld Leistungsablaufverfolgung speichern im Leistungstool das Kontrollkästchen Skriptquellzuordnungen einschließen und enthält verknaktete Produktionsinhaltsdateien und die Zuordnungen zurück zu den ursprünglichen Quellcodedateien. Quellzuordnungen werden von DevTools verwendet, um Ihre ursprünglichen Dateien zu laden und minimierten Code durch originalen Code zu ersetzen.

Wenn die resultierende Ablaufverfolgungsdatei anschließend geöffnet wird, zeigt das Leistungstool die ursprünglichen Funktionsnamen an, und das Tool Quellen zeigt die ursprünglichen Dateinamen an. Achtung: Dies kann Quellcode für den Empfänger der Ablaufverfolgungsdatei verfügbar machen.

Einige Leistungserkenntnisse erfordern Quellzuordnungen für die Analyse. Weitere Informationen finden Sie unter Abrufen von umsetzbaren Erkenntnissen in der Referenz zu Leistungsfeatures.

Um dieses Kontrollkästchen verfügbar statt abgeblendet zu machen, müssen Sie das Kontrollkästchen Ressourceninhalt einschließen aktivieren, das Skriptinhalte in der Ablaufverfolgungsdatei enthält.

Siehe auch:

Komprimieren mit gzip

Im Dialogfeld Leistungsablaufverfolgung speichern im Leistungstool ist das Kontrollkästchen Komprimieren mit gzip standardmäßig aktiviert. Diese Option hilft dabei, große Leistungsablaufverfolgungen zu komprimieren, um Speicherplatz zu sparen, und beschleunigt das Importieren und Verarbeiten von Ablaufverfolgungsdateien in DevTools.

  • Wenn dieses Kontrollkästchen aktiviert ist, lautet .gzdie Standarddateierweiterung .
  • Wenn dieses Kontrollkästchen deaktiviert ist, lautet .jsondie Standarddateierweiterung .

Öffnen einer Leistungsablaufverfolgungsdatei in DevTools

Wenn eine Ablaufverfolgungsdatei in DevTools geöffnet (importiert) wird, wird im Browser eine neue, spezialisierte Registerkarte DevTools geöffnet, die nur die Tools Leistung und Quellen enthält. Die Ablaufverfolgung kann Anmerkungen, Ressourceninhalte (z. B. Skripts) und Quellzuordnungen enthalten. Diese neue Registerkarte 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.

So öffnen Sie eine gespeicherte Ablaufverfolgungsdatei in DevTools:

  1. Öffnen Sie Microsoft Edge oder einen anderen Chromium-basierten Browser.

  2. Klicken Sie mit der rechten Maustaste auf die Webseite oder die leere Registerkarte, und wählen Sie dann Untersuchen aus.

    DevTools wird geöffnet.

  3. Wählen Sie in DevTools das Tool Leistung (Leistungssymbol) aus.

  4. Klicken Sie auf die Schaltfläche Ablaufverfolgung laden (Symbol ").

    Das Dialogfeld Öffnen wird geöffnet.

  5. Navigieren Sie zu einer freigegebenen Ablaufverfolgungsdatei, z C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz. B. .

  6. Wählen Sie die Datei aus, z. B. die ZIP-Datei Trace-20251103T154500.json.gz.

  7. Klicken Sie auf die Schaltfläche Öffnen .

    Eine spezielle Registerkarte DevTools wird im Browser geöffnet, die vollständig mit DevTools gefüllt ist und die Tools Quellen und Leistung öffnet:

    Registerkarte

    Auf der Adressleiste wird eine spezielle URL angezeigt, z. B.:

    • devtools://devtools/bundled/trace_app.html
    • devtools://devtools/bundled/rehydrated_devtools_app.html

    Dies ist eine spezielle DevTools-dedizierte Registerkarte des Browsers und nicht das nicht angedockte DevTools-Fenster. Auf einige andere relevante Tools, die für die Analyse der Ablaufverfolgung nützlich sein können, können Sie zugreifen, indem Sie auf die Schaltfläche Weitere Tools klicken, z. B.:

    • Developer-Ressourcen
    • Schnelle Quelle
    • Wiedergabe
    • Search
    • Sensoren

Siehe auch:

Siehe auch

Quellentool :

Leistungstool :

GitHub:

Chrome-Dokumentation:

  • Last updated on