Veröffentlicht: 13. November 2024
Angenommen, Sie sehen sich eine Leistungsaufzeichnung 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.)
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.
Es gibt drei Arten von Anmerkungen:
Mit Anmerkungen versehene Zeiträume: Sie können beliebige Zeiträume auf der Zeitachse beschriften.
Anmerkungen zu Einträgen: Sie können jedem Eintrag in der Zeitachse ein Label hinzufügen.
Eintragsverbindungen: Zwei Einträge werden mit einem Pfeil verbunden, um ihre Beziehung zu verdeutlichen.
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.
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.
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.
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.
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.
In DevTools werden auch andere Arten von Anpassungen in der Trace-Ansicht gespeichert. So können Sie 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 Spurenverlauf speichern. Wenn ein Datensatz geladen wird, enthält er 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.
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.