Passen Sie Ihre Leistungsdaten mit der Extensible API an.

Andrés Olivares

Sofia Emelianova

Übersicht

Der Bereich Leistung unterstützt die API zum Erweitern der Leistung, über die Sie der Leistungszeitachse eigene benutzerdefinierte Daten hinzufügen können.

Diese API nutzt die vorhandene User Timings API und ermöglicht es Ihnen, Ihre Messungen und Ereignisse direkt als benutzerdefinierten Track oder in den Timings-Track in die Leistungszeitachse einzubinden. Dies kann für Entwickler von Frameworks, Bibliotheken und komplexen Anwendungen mit benutzerdefinierter Instrumentierung nützlich sein, um ein umfassenderes Verständnis der Leistung zu erhalten.

Wichtige Features

• Benutzerdefinierte Tracks: Sie können eigene Tracks erstellen, um Ihre eigenen zeitbezogenen Daten zu visualisieren.
• Einträge: Füllen Sie Tracks mit Einträgen, die Ereignisse oder Messungen darstellen.
• Kurzinfos und Details: Stellen Sie umfangreichen Kontext für Einträge mit anpassbaren Kurzinfos und Detailansichten bereit.
• Markierungen: Mit visuellen Markierungen können Sie bestimmte Momente in der Zeitachse hervorheben.

Daten mit der User Timings API einfügen

Um benutzerdefinierte Daten einzufügen, fügen Sie ein devtools-Objekt in die Property detail der Methoden performance.mark und performance.measure ein. Die Struktur dieses devtools-Objekts bestimmt, wie Ihre Daten im Bereich Leistung dargestellt werden.

• Verwenden Sie performance.mark, um ein sofortiges Ereignis oder einen Zeitstempel in der Zeitachse aufzuzeichnen. Sie können den Beginn oder das Ende eines bestimmten Vorgangs oder einen beliebigen POI ohne Dauer markieren. Wenn du ein devtools-Objekt in der detail-Property einfügst, wird im Bereich Leistung im Track Timings eine benutzerdefinierte Markierung angezeigt.

• Verwenden Sie performance.measure, um die Dauer einer Aufgabe oder eines Prozesses zu messen. Wenn Sie ein devtools-Objekt in die detail-Eigenschaft aufnehmen, werden im Steuerfeld Leistung benutzerdefinierte Messwerte auf der Zeitachse eines benutzerdefinierten Tracks angezeigt. Wenn Sie performance.mark als Referenzpunkt verwenden, um ein performance.measure zu erstellen, müssen Sie das devtools-Objekt nicht in performance.mark-Aufrufe aufnehmen.

devtools Objekt

Diese Typen definieren die Struktur des devtools-Objekts für verschiedene Erweiterungsfunktionen:

type DevToolsColor =
  "primary" | "primary-light" | "primary-dark" |
  "secondary" | "secondary-light" | "secondary-dark" |
  "tertiary" | "tertiary-light" | "tertiary-dark" |
  "error";

interface ExtensionTrackEntryPayload {
  dataType?: "track-entry"; // Defaults to "track-entry"
  color?: DevToolsColor;    // Defaults to "primary"
  track: string;            // Required: Name of the custom track
  trackGroup?: string;      // Optional: Group for organizing tracks
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

interface ExtensionMarkerPayload {
  dataType: "marker";       // Required: Identifies as a marker
  color?: DevToolsColor;    // Defaults to "primary"
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

Daten in der Zeitachse ansehen

Wenn Sie Ihre benutzerdefinierten Daten in der Zeitachse sehen möchten, aktivieren Sie im Bereich Leistung die Einstellungen Aufnahmeeinstellungen > Kästchen Erweiterungsdaten.

Probieren Sie es auf dieser Demoseite aus. Aktivieren Sie Erweiterungsdaten, starten Sie eine Leistungsaufzeichnung, klicken Sie auf der Demoseite auf Neuen Corgi hinzufügen und beenden Sie die Aufzeichnung. Im Trace wird ein benutzerdefinierter Track mit Ereignissen mit benutzerdefinierten Kurzinfos und Details auf dem Tab Zusammenfassung angezeigt.

Codebeispiele

In den nächsten Abschnitten finden Sie Codebeispiele, die zeigen, wie Sie der Leistungszeitachse Folgendes hinzufügen:

• Benutzerdefinierte Tracks und Einträge in der Zeitachse
• Markierungen auf dem Zeitachsenpfad

Benutzerdefinierte Tracks und Einträge

Sie können benutzerdefinierte Tracks erstellen und mit Einträgen füllen, um Ihre Leistungsdaten in einem benutzerdefinierten Track zu visualisieren. Beispiel:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
  start: "Image Processing Start", {
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Image Processing Tasks",
      trackGroup: "My Tracks", // Group related tracks together
      color: "tertiary-dark",
      properties: [
        ["Filter Type", "Gaussian Blur"],
        ["Resize Dimensions", "500x300"]
      ],
      tooltipText: "Image processed successfully"
    }
  }
});

Daraus ergibt sich der folgende benutzerdefinierte Track-Eintrag in der Leistungszeitachse, zusammen mit dem Text und den Eigenschaften der Kurzinfo:

Markierungen

Mit benutzerdefinierten Markierungen, die sich über alle Tracks erstrecken, können Sie bestimmte POIs auf der Zeitachse visuell hervorheben. Beispiel:

// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
  detail: {
    devtools: {
      dataType: "marker",
      color: "secondary",
      properties: [
        ["Image Size", "2.5MB"],
        ["Upload Destination", "Cloud Storage"]
      ],
      tooltipText: "Processed image uploaded"
    }
  }
});

Das führt zu der folgenden Markierung im Timings-Track mit dem zugehörigen Kurzinfotext und den Eigenschaften: