Dostosuj dane o skuteczności za pomocą interfejsu API Extensibility API

Andrés Olivares

Sofia Emelianova

Omówienie

Panel Skuteczność obsługuje interfejs API rozszerzania skuteczności, który umożliwia dodawanie własnych danych niestandardowych do osi czasu skuteczności.

Wykorzystuje on dotychczasowy interfejs User Timings API i umożliwia wstrzykiwanie pomiarów i zdarzeń bezpośrednio na osi czasu skuteczności w postaci ścieżki niestandardowej lub ścieżki Czasów. Może to być przydatne dla deweloperów frameworków, bibliotek i kompleksowych aplikacji z niestandardowymi narzędziami pomiarowymi, którzy chcą uzyskać bardziej kompleksowe informacje o wydajności.

Najważniejsze funkcje

• Ścieżki niestandardowe: możesz tworzyć specjalne ścieżki do wizualizacji własnych danych czasowych.
• Wpisy: wypełnij ścieżki wpisami reprezentującymi zdarzenia lub pomiary.
• Wskazówki i szczegóły: zapewnij wpisom obszerny kontekst za pomocą możliwych do dostosowania etykietek i widoków szczegółowych.
• Znaczniki: wyróżniaj określone momenty na osi czasu za pomocą znaczników wizualnych.

Wstrzykiwanie danych za pomocą interfejsu API Czasy użytkownika

Aby wstrzyknąć dane niestandardowe, dodaj obiekt devtools do właściwości detail metod performance.mark i performance.measure. Struktura obiektu devtools określa sposób wyświetlania danych w panelu Skuteczność.

• Aby zarejestrować natychmiastowe zdarzenie lub sygnaturę czasową na osi czasu, użyj performance.mark. Możesz zaznaczyć początek lub koniec konkretnej operacji lub dowolnego miejsca, które nie ma czasu trwania. Gdy w ramach właściwości detail uwzględnisz obiekt devtools, w panelu Wydajność pojawi się znacznik niestandardowy na ścieżce Czasy.

• Użyj narzędzia performance.measure, aby mierzyć czas trwania zadania lub procesu. Gdy w ramach właściwości detail uwzględnisz obiekt devtools, panel Skuteczność wyświetli na osi czasu w ścieżce niestandardowej wpisy niestandardowych pomiarów. Jeśli używasz performance.mark jako punktu odniesienia przy tworzeniu obiektu performance.measure, nie musisz uwzględniać obiektu devtools w wywołaniach performance.mark.

devtools obiekt

Te typy określają strukturę obiektu devtools na potrzeby różnych funkcji rozszerzeń:

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
}

Wyświetlanie danych na osi czasu

Aby wyświetlić niestandardowe dane na osi czasu, w panelu Skuteczność włącz ustawienia Ustawienia przechwytywania > check_box Dane rozszerzenia.

Wypróbuj tę stronę demonstracyjną. Włącz Dane rozszerzenia, rozpocznij nagrywanie wydajności, na stronie demonstracyjnej kliknij Dodaj nowego Corgi, a potem zatrzymaj nagrywanie. Na karcie Podsumowanie zobaczysz ścieżkę niestandardową, która zawiera zdarzenia z niestandardowymi etykietami i szczegółami.

Przykłady kodu

W kolejnych sekcjach znajdziesz przykłady kodu, które pokazują, jak dodać do osi czasu skuteczności te elementy:

• Niestandardowe ścieżki i wpisy na osi czasu
• Znaczniki na ścieżce czasu

Niestandardowe ścieżki i wpisy

Tworzenie ścieżek niestandardowych i wypełnianie ich wpisami w celu wizualizacji danych o skuteczności na ścieżce niestandardowej. Na przykład:

// 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"
    }
  }
});

W związku z tym na osi czasu skuteczności pojawi się wpis dotyczący niestandardowego śledzenia wraz z tekstem i właściwościami etykietki:

Znaczniki

Możesz wyróżnić konkretne miejsca na osi czasu za pomocą niestandardowych znaczników rozciągających się na wszystkich ścieżkach. Na przykład:

// 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"
    }
  }
});

Powoduje to pojawienie się tego znacznika na ścieżce Czasy wraz z tekstem i właściwościami etykietki: