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 obecny 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 programistów platform, bibliotek i złożonych aplikacji z niestandardowymi instrumentami, które pozwalają lepiej zrozumieć wydajność.

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 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 w ramach właściwości detail umieścisz obiekt devtools, w panelu Wydajność pojawi się znacznik niestandardowy na osi czasu.

• Użyj narzędzia performance.measure, aby mierzyć czas trwania zadania lub procesu. Gdy w komponencie detail uwzględnisz obiekt devtools, w panelu Skuteczność pojawią się na osi czasu wpisy pomiarów niestandardowych. 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 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ć niestandardowe dane na osi czasu, w panelu Skuteczność włącz ustawienia Ustawienia przechwytywania > check_box 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. W śledzeniu pojawi się ścieżka niestandardowa, która zawiera zdarzenia z niestandardowymi etykietkami oraz szczegółowe informacje na karcie Podsumowanie.

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

Twórz ścieżki niestandardowe i wypełniaj je wpisami, aby wizualizować dane o skuteczności na ścieżce niestandardowej. Na przykład:

// Mark used to represent the start of an image processing task
performance.mark("Image Processing Start");

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
performance.measure("Image Processing Complete", "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: