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

Andrés Olivares

Sofia Emelianova

Omówienie

Panel Wydajność obsługuje interfejs API umożliwiający rozszerzanie skuteczności, który pozwala dodawać do osi czasu skuteczności własne dane niestandardowe.

Ten interfejs API korzysta z dotychczasowego interfejsu User Timings API i pozwala wstawiać pomiary oraz zdarzenia bezpośrednio na osi czasu skuteczności jako ścieżka niestandardowa lub ścieżka Czasy. 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

• Utwory niestandardowe: twórz niestandardowe utwory, aby wizualizować własne dane czasowe.
• 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ą wizualnych znaczników.

Wstrzykiwanie danych za pomocą interfejsu User Timings API

Aby wstawić dane niestandardowe, dodaj obiekt devtools we właściwości detail w metodach 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 oznaczyć początek lub koniec konkretnej operacji lub dowolny punkt zainteresowania, który nie ma czasu trwania. Gdy uwzględnisz obiekt devtools we właściwości detail, w panelu Skuteczność na ścieżce Czas pojawi się znacznik niestandardowy.

• Użyj elementu performance.measure, aby mierzyć czas trwania zadania lub procesu. Gdy uwzględnisz w usłudze detail obiekt devtools, w panelu Skuteczność pojawią się niestandardowe pozycje pomiaru na osi czasu na ścieżce niestandardowej. Jeśli do utworzenia elementu performance.measure używasz elementu performance.mark jako punktu odniesienia, 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 zobaczyć niestandardowe dane na osi czasu, w panelu Skuteczność włącz ustawienia Ustawienia przechwytywania > pole wyboru Dane rozszerzeń.

Wypróbuj to na stronie demonstracyjnej. 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ą zawierającą 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 elementy na osi czasu
• Znaczniki na ścieżce czasu

Ścieżki i wpisy niestandardowe

Twórz niestandardowe ścieżki i wypełniaj je wpisami, aby wizualizować dane o skuteczności na tej ścieżce. 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"
    }
  }
});

Powoduje to pojawienie się na osi czasu skuteczności tego wpisu ścieżki niestandardowej 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: