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 dedykowane utwory do wizualizacji własnych danych czasowych.
• Wpisy: wypełniają ścieżki wpisami reprezentującymi zdarzenia lub pomiary.
• Etykiety i szczegóły: zapewniają bogaty kontekst dla wpisów dzięki dostosowywanym etykietkom i widokom szczegółowym.
• Znaczniki: wyróżniaj określone momenty na osi czasu za pomocą wizualnych znaczników.

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 oznaczyć początek lub koniec konkretnej operacji lub dowolny punkt zainteresowania, który nie ma czasu trwania. Gdy w ramach właściwości detail umieścisz obiekt devtools, w panelu Wydajność pojawi się znacznik niestandardowy na ścieżce Czasy.

• Użyj elementu performance.measure, aby mierzyć czas trwania zadania lub procesu. Gdy w ramach właściwości detail uwzględnisz obiekt devtools, w panelu Skuteczność pojawią się wpisy niestandardowych pomiarów na osi czasu w niestandardowym śladzie. 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 w przypadku różnych funkcji rozszerzenia:

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ć dane niestandardowe na osi czasu, w panelu Wydajność włącz ustawienia Ustawienia rejestrowania > pole wyboru Dane rozszerzenia.

Wypróbuj to na stronie demonstracyjnej. Włącz Dane rozszerzenia, rozpocznij nagrywanie wydajności, na stronie demonstracyjnej kliknij Dodaj nowe 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 elementy na osi czasu
• Oznaczenia na ścieżce Czasy

Ścieżki i wpisy niestandardowe

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

Podświetlaj wizualnie konkretne punkty na osi czasu za pomocą niestandardowych znaczników, które obejmują wszystkie ścieżki. 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"
    }
  }
});

W efekcie na ścieżce Harmonogram pojawi się ten znacznik wraz z tekstem i właściwościami wtyczki: