Traces direkt im Bereich „Leistung“ annotieren

Veröffentlicht: 13. November 2024

Angenommen, Sie sehen sich einen Leistungsverlauf an und möchten einen bestimmten Bereich hervorheben, z. B. die längste Aufgabe oder einen unnötigen Arbeitsaufwand. Vielleicht wollten Sie sich Notizen für später machen oder Ihre Ergebnisse mit einem Kollegen teilen. Wie gehen Sie am besten vor?

Natürlich können Sie die Spur auch auf ein großes Blatt Papier ausdrucken und Ihre Notizen manuell zeichnen und schreiben oder mithilfe von Drittanbietersoftware Notizen auf einem Screenshot einer Spur zeichnen. (Bisher war das aber die beste Möglichkeit.)

Ein Entwickler schreibt per Hand auf eine ausgedruckte DevTools-Aufzeichnung
Eine Spur von Hand annotieren (Ori Livneh, CC BY 4.0, Wikimedia Commons)

Unser Team ist bestrebt, Entwicklerworkflows zu optimieren. Deshalb möchten wir Ihnen eine Alternative zu diesen Optionen vorstellen: die Möglichkeit, Anmerkungen direkt im Bereich Leistung zum Trace hinzuzufügen.

Jetzt können Sie Traces direkt annotieren, diese Anmerkungen ganz einfach bearbeiten und sogar direkt in der Tracedatei speichern. So ist das Teilen von hervorgehobenen Statistiken so einfach wie das Senden einer Datei. Außerdem sind keine externen Tools oder Umwege mehr erforderlich. Anmerkungen können Ihnen nicht nur beim Beheben von Leistungsproblemen helfen, sondern auch dabei, schnell auf den gleichen Stand wie Ihr Kollege zu kommen oder sein Verständnis für das Problem ohne viel Hin und Her zu verbessern.

Anmerkungen im Bereich „Leistung“

Es gibt drei Arten von Anmerkungen:

  1. Mit Anmerkungen versehene Zeiträume: Sie können beliebige Zeiträume in der Zeitachse beschriften.

  2. Anmerkungen zu Einträgen: Sie können jedem Eintrag in der Zeitachse ein Label hinzufügen.

  3. Eintragsverbindungen: Zwei Einträge werden mit einem Pfeil verbunden, um ihre Beziehung zu zeigen.

Sehen wir uns die einzelnen Anmerkungstypen und die Szenarien an, in denen sie nützlich sein können.

Mit Anmerkungen versehene Zeiträume

Ein gängiger Workflow in DevTools ist das Aufzeichnen eines Tracings, um eine langsame Interaktion zu beheben. Die Ablaufverfolgung kann auf den ersten Blick überwältigend wirken. Wenn Sie jedoch bestimmte Ereignishandler und Aufrufstapel aufschlüsseln, wird sie immer verständlicher. Sie können die Ansicht mit Anmerkungen versehen, um zu kennzeichnen, wie ein bestimmter Zeitraum in der Regel verbracht wird. So kann es beispielsweise hilfreich sein, den Zeitraum zu annotieren, damit die Benutzeroberfläche nach einer Nutzerinteraktion sinnvoll aktualisiert wird.

Den Zeitraum vom Beginn einer Interaktion bis zum Zeitpunkt der Aktualisierung der Benutzeroberfläche annotieren

Zeitbereich mit Anmerkung versehen: Halten Sie die Umschalttaste gedrückt und ziehen Sie vom Beginn der Interaktion bis zur UI-Aktualisierung. Geben Sie anschließend ein Label ein, um die Anmerkung zu erstellen. Wenn der ausgewählte Bereich nicht korrekt ist, klicken Sie ihn weg, bevor Sie etwas eingeben. Wenn Sie das Label einer Anmerkung bearbeiten möchten, klicken Sie darauf und dann doppelt darauf. Der Zeitraum einer vorhandenen Anmerkung kann derzeit nicht angepasst werden. Wenn der Zeitraum falsch ist, löschen Sie die Anmerkung und erstellen Sie eine neue.

Mit dieser Anmerkung erhalten Sie einen besseren Überblick über alle Arbeiten, die vor der nutzersichtbaren Änderung ausgeführt werden müssen, sodass Sie sich auf die Fehlerbehebung konzentrieren können.

Anmerkungen zu Einträgen

Um die für Nutzer sichtbare Änderung noch deutlicher zu machen, können Sie die Aufgabe, die für den Übergang verantwortlich ist, auch mit einem Eingabelabel versehen.

Einträge im Bereich „Leistung“ annotieren

Label für den Eintrag erstellen: Doppelklicken Sie auf den ausgewählten Eintrag und geben Sie das Label ein oder klicken Sie mit der rechten Maustaste auf den Eintrag und wählen Sie im Kontextmenü „Labeleintrag“ aus. Wenn Sie das Label einer Anmerkung bearbeiten möchten, doppelklicken Sie auf den Eintrag oder das Label. Alternativ können Sie im Kontextmenü die Option „Labeleintrag“ auswählen.

Mit diesen Anmerkungen ist es einfacher zu erkennen, welche Arbeit für die Interaktion wichtig ist (oder nicht) und wie viel Zeit sie in Anspruch nimmt.

Eintragsverbindungen

Die dritte Möglichkeit, den Ablauf zu kommentieren, besteht darin, eine Verbindung zwischen der Interaktion und der langen Aufgabe zu zeichnen, die für den Übergang verantwortlich ist.

Eintragsverbindungen im Bereich „Leistung“ annotieren

Eine Verbindung zwischen Einträgen herstellen: Doppelklicken Sie auf den Eintrag, den Sie mit einem anderen verknüpfen möchten, und dann auf den Pfeil rechts neben diesem Eintrag. Klicken Sie dann auf den Eintrag, mit dem Sie eine Verbindung herstellen möchten. Alternativ können Sie mit der rechten Maustaste auf den Eintrag klicken und im Kontextmenü „Einträge verknüpfen“ auswählen.

Auch wenn die Interaktion selbst beendet ist, können Sie mit dieser Art von Anmerkung klarer zeigen, wie sie mit den nachfolgenden langen Aufgaben zusammenhängt, die letztendlich die Benutzeroberfläche blockieren.

Anmerkungen löschen und ausblenden

Alle Anmerkungen können schnell über die Anmerkungsliste in der Seitenleiste gelöscht werden. Wenn Sie den Mauszeiger auf eine Anmerkung bewegen, wird ein Papierkorbsymbol  angezeigt. Klicken Sie auf dieses Symbol, um die Anmerkung zu löschen.

Anmerkungen im Bereich „Leistung“ löschen

Wenn Sie die Labels für Einträge und die Anmerkungen zu Verbindungen von Einträgen löschen möchten, die mit einem bestimmten Ereignis verknüpft sind, klicken Sie mit der rechten Maustaste auf das Ereignis und wählen Sie „Anmerkungen löschen“ aus. Anmerkungen mit Labels können auch gelöscht werden, indem Sie das Label entfernen und die Anmerkungen speichern.

Wenn Sie Anmerkungen ausblenden, aber nicht löschen möchten, damit sie Sie beim Analysieren des Logs nicht stören, setzen Sie einfach unten in der Anmerkungsleiste ein Häkchen in das Kästchen „Anmerkungen ausblenden“. Diese Einstellung wird gespeichert. Wenn Sie einen Trace mit Anmerkungen laden, während diese Einstellung aktiviert ist, bleiben die Anmerkungen ausgeblendet, bis Sie das Kästchen deaktivieren.

Anmerkungen zu Traces speichern oder laden

Sehr gut. Sie haben all diese Anmerkungen hinzugefügt, um sich und anderen die Analyse des Logs zu erleichtern. Nächste Schritte

Sie müssen keine Screenshots des Traces mehr machen und an einen Kollegen senden, wie es früher vor den Anmerkungen der Fall war. Speichern Sie einfach die Datei mit den Anmerkungen und senden Sie sie an das Team. Das war's auch schon. Der Entwickler kann die Datei in den Bereich Leistung hochladen und alle Anmerkungen sehen, die Sie im Zusammenhang mit dem Trace gemacht haben. Er kann auch weitere Anmerkungen hinzufügen und die Datei an Sie zurücksenden.

Traces mit Anmerkungen speichern
Trace mit oder ohne Anmerkungen im Bereich „Leistung“ speichern

In DevTools werden auch andere Arten von Anpassungen in der Trace-Ansicht gespeichert. Sie können beispielsweise einen Bereich von Interesse isolieren, indem Sie heranzoomen und einen Breadcrumb festlegen, oder Einträge in irrelevanten Aufrufstapeln ausblenden. Alle diese Einstellungen werden in der Tracedatei gespeichert, was die Zusammenarbeit bei der Leistungsfehlerbehebung noch einfacher macht. Mit all diesen Anpassungen können Sie die Aufmerksamkeit auf das Wesentliche lenken und gleichzeitig den Kontext des gesamten interaktiven Traces liefern – im Gegensatz zu einem Screenshot.

Wenn Sie Anmerkungen und andere Anpassungen beibehalten möchten, klicken Sie unter dem Downloadsymbol  auf die Option Spuren speichern. Wenn ein Protokoll geladen wird, enthält es alle diese Anpassungen. Das Speichern mit Anmerkungen ist die Standardoption. Wenn Sie nur die Roh-Tracedatei speichern möchten, wählen Sie die Option Trace ohne Anmerkungen speichern aus.

Fazit

Das mag auf den ersten Blick nach vielen Informationen klingen, aber keine Sorge! Eine Anleitung zum Erstellen von Anmerkungen finden Sie jederzeit auf dem Tab „Anmerkungen“ in der Seitenleiste des Bereichs Leistung. Dieser Tab enthält eine Anleitung, wenn noch keine Anmerkungen vorhanden sind, und eine Listenansicht der Anmerkungen, sobald sie erstellt wurden.

Seitenleiste für Anmerkungen im Bereich „Leistung“
Anleitung zum Arbeiten mit Anmerkungen in der Seitenleiste des Bereichs „Leistung“

Auf ähnliche Weise können Entwickler mit Anmerkungen im Bereich Leistung wichtige Momente in einem Trace ermitteln und personalisierten Kontext und Statistiken hinzufügen. So wird der Analyseprozess optimiert und die gemeinsame Arbeit an Leistungsoptimierungen wird erleichtert. Probieren Sie die Anmerkungen im Bereich „Leistung“ aus und lassen Sie uns wissen, was Sie davon halten. Wenn du Feedback hast, kannst du es gerne in der öffentlichen Anfrage hinterlassen.

Sie müssen keine externen Tools mehr verwenden und können effizienter arbeiten.