Anzeigen der ursprünglichen Funktionsnamen in Leistungsprofilen

Wenn Ihr Buildprozess Ihren Code kompiliert und minifiziert und zu einer einzelnen Datei kombiniert, sind die Namen der in einem Leistungsprofil angezeigten Funktionen möglicherweise schwer zu verstehen. Quellzuordnungen ordnen Ihren kompilierten, minimierten Code Ihren ursprünglichen Quellcodedateien zu. Das Leistungstool kann Quellzuordnungen verwenden, um minimierte Funktionsnamen nach der Aufzeichnung zu ihren ursprünglichen Namen im ursprünglichen Code zuzuordnen.

Weitere Informationen dazu, wie DevTools Quellzuordnungen verwendet, finden Sie unter Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen.

Um Ihre ursprünglichen Funktionsnamen im Flammendiagramm im Leistungstool anzuzeigen, verwenden Sie die Schaltfläche Entminify ( aufheben).

Die Quellzuordnung wird in DevTools verwendet, um ihren clientseitigen Code lesbar und debugfähig zu halten. Durch Klicken auf die Schaltfläche "Aufheben " im Leistungstool können Sie quellzuordnungen verwenden, um eine nicht minimierte Version des aufgezeichneten Leistungsprofils zu erstellen.

Beispiel für ein Leistungsprofil-Flammendiagramm mit schwer lesbaren Funktionsnamen:

Ein Beispiel für ein Leistungsprofil-Flammendiagramm mit einigen aussagekräftigeren Funktionsnamen wiederhergestellt:

Beim Aufzeichnen eines Leistungsprofils im Leistungstool werden im Hauptabschnitt des Profils ausführliche Flammendiagramme von JavaScript-Funktionen angezeigt, die während der Aufzeichnung aufgerufen wurden.

Idealerweise möchten Sie in dieser Flammendiagrammansicht die aussagekräftigen Funktionsnamen sehen, die im ursprünglichen Quellcode angezeigt werden. Wenn Ihr Produktionscode jedoch kompiliert, minimiert oder gebündelt ist, zeigt das Leistungstool zunächst die Funktionsnamen an, die aus Ihrem transformierten Produktionscode extrahiert werden. Diese Namen von Produktionsfunktionen sind möglicherweise undurchsichtig und können nicht einfach mit Funktionsnamen in Ihrem ursprünglichen Quellcode zugeordnet werden.

Führen Sie die folgenden Schritte aus, um ein Leistungsprofil zu entminifizieren, sodass neben den minimierten Bezeichnern einige aussagekräftigere Funktionsnamen angezeigt werden.

Schritt 1: Einrichten von Quellzuordnungen

Hosten Sie Ihre Quellzuordnungen parallel mit Ihrem Produktionscode. Bei der Entschmeinung erwartet das Leistungstool , dass Ihre Quellzuordnungen zusammen mit Ihrem Produktionscode gefunden werden.

Weitere Informationen finden Sie unter Zuordnen des verarbeiteten Codes zu Ihrem ursprünglichen Quellcode zum Debuggen.

Schritt 2: Aufzeichnen eines Leistungsprofils

1. Klicken Sie im Leistungstool auf die Schaltfläche Aufzeichnen , um ein Leistungsprofil für die Seite aufzuzeichnen, die Sie analysieren möchten. Weitere Informationen finden Sie unter Aufzeichnen der Laufzeitleistung.

   

   Ein Leistungsprofil wird im Leistungstool aufgezeichnet.

2. Klicken Sie im Leistungstool auf den bereich Standard (das Flammendiagramm), und verwenden Sie das Mausrad, um zu vergrößern. Klicken Und ziehen Sie nach links und rechts. Sehen Sie sich die Funktionsnamen im Flammendiagramm an.

   Das Flammendiagramm im Leistungstool zeigt minimierte Funktionsnamen wie XI, Gi, d, o, an, c, co und ein aus Ihrem Produktionscode:

   

Schritt 3: Aufheben der Codeminifizierung

1. Klicken Sie auf die Schaltfläche "Aufheben " ("):

   

   In DevTools wird kurz ein Popup mit dem Text Status: Erstellen einer nicht verknappten Datei angezeigt. Anschließend wird das Dialogfeld Speichern unter geöffnet. Der Standarddateiname ist ein Muster, das mit Datum und Uhrzeit beginnt, z yymmddThhmmss. B. Profile-20220307T164948-unminified.json. Das Standardverzeichnis ist das Verzeichnis Downloads .

2. Wählen Sie einen Dateinamen und ein Verzeichnis aus, und klicken Sie dann auf die Schaltfläche Speichern.

   Das Leistungstool erstellt eine neue Version des aufgezeichneten Leistungsprofils, wobei einige Funktionsnamen aus dem Flammendiagramm mithilfe Ihrer Quellzuordnungen durch aussagekräftigere Funktionsnamen ersetzt werden. Einige der minimierten Produktionsnamen werden möglicherweise weiterhin angezeigt, da Quellzuordnungen nicht immer die erforderlichen Informationen bereitstellen, damit das Leistungstool alle Funktionsnamen zuordnen kann.

Schritt 4: Laden des nicht minimierten Profils

1. Klicken Sie im Leistungstool auf die Schaltfläche Profil laden (). Oder klicken Sie mit der rechten Maustaste auf einen leeren Bereich des Leistungstools , und wählen Sie dann Profil laden aus.

   

2. Wählen Sie im Dialogfeld Öffnen die nicht minimierte Leistungsprofildatei .json aus, die Sie soeben heruntergeladen haben. Ausführliche Informationen finden Sie bei Bedarf unter Laden einer Aufzeichnung in der Referenz zu Leistungsfeatures, und fahren Sie dann weiter unten fort.

   Einige Funktionsnamen sind jetzt nicht mehr bekannt. Das nicht minimierte Flammendiagramm im Leistungstool zeigt jetzt die Funktionen mit aussagekräftigeren Namen aus Ihren Quellzuordnungen, z. B. useObserver (d), useQueuedForceUpdateBlock (o), trackDerivedFunction (an), initializeIconColorMap (c), getExtraToolControls (co) und isToggleEnabled (a).

   

Siehe auch

• Einführung in das Leistungstool : Eine Einführung in die Analyse der Laufzeitleistung in DevTools.
• Referenz zu Leistungsfeatures: Eine Referenz für viele der Features, die im Leistungstool angeboten werden.