Pas uw prestatiegegevens aan met de uitbreidbaarheids-API

Andrés Olivares

Sofia Emelianova

Overzicht

Het paneel Prestaties ondersteunt de API voor prestatie-uitbreiding waarmee u uw eigen aangepaste gegevens aan de prestatietijdlijn kunt toevoegen.

Deze API maakt gebruik van de bestaande User Timings API en laat u uw metingen en gebeurtenissen rechtstreeks in de prestatietijdlijn injecteren als een aangepaste track of in de Timings- track. Dit kan nuttig zijn voor ontwikkelaars van raamwerken, bibliotheken en complexe applicaties met aangepaste instrumenten om een ​​uitgebreider inzicht in de prestaties te krijgen.

Belangrijkste kenmerken

• Aangepaste tracks : maak speciale tracks om uw eigen op tijd gebaseerde gegevens te visualiseren.
• Invoer : vul tracks in met gegevens die gebeurtenissen of metingen vertegenwoordigen.
• Tooltips en details : Bied rijke context voor vermeldingen met aanpasbare tooltips en gedetailleerde weergaven.
• Markeringen : markeer specifieke momenten in de tijdlijn met visuele markeringen.

Injecteer uw gegevens met de User Timings API

Als u aangepaste gegevens wilt injecteren, neemt u een devtools object op in de eigenschap detail van de methoden performance.mark en performance.measure . De structuur van dit devtools object bepaalt hoe uw gegevens worden weergegeven in het paneel Prestaties .

• Gebruik performance.mark om een ​​directe gebeurtenis of tijdstempel in de tijdlijn op te nemen. U kunt het begin of einde van een specifieke operatie of een interessant punt zonder duur markeren. Wanneer u een devtools object opneemt in de detail , toont het paneel Prestaties een aangepaste markering in de tijdlijn.

• Gebruik performance.measure om de duur van een taak of proces te meten. Wanneer u een devtools object opneemt in de detail , worden in het paneel Prestaties aangepaste meetgegevens weergegeven in de tijdlijn. Als u performance.mark als referentiepunt gebruikt om een performance.measure te maken, hoeft u het devtools object niet op te nemen in performance.mark -aanroepen.

devtools -object

Deze typen definiëren de structuur van het devtools object voor verschillende uitbreidingsfuncties:

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
}

Bekijk uw gegevens in de tijdlijn

Om uw aangepaste gegevens in de tijdlijn te zien, schakelt u in het paneel Prestaties de optie Instellingen vastleggen > check_box Extensiegegevens in .

Probeer het op deze demopagina . Schakel Extensiegegevens in, start een uitvoeringsopname, klik op Nieuwe Corgi toevoegen op de demopagina en stop vervolgens de opname. U ziet een aangepaste track in de trace die gebeurtenissen bevat met aangepaste knopinfo en details op het tabblad Samenvatting .

Codevoorbeelden

In de volgende secties ziet u de codevoorbeelden die laten zien hoe u het volgende aan de prestatietijdlijn kunt toevoegen:

• Aangepaste tracks en vermeldingen op de tijdlijn
• Markeringen voor het timingspoor

Aangepaste nummers en vermeldingen

Maak aangepaste tracks en vul deze met vermeldingen om uw prestatiegegevens in een aangepaste track te visualiseren. Bijvoorbeeld:

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

Dit resulteert in de volgende aangepaste trackinvoer in de prestatietijdlijn, samen met de bijbehorende tooltiptekst en eigenschappen:

Markeringen

Markeer visueel specifieke aandachtspunten in de tijdlijn met aangepaste markeringen die zich over alle tracks uitstrekken. Bijvoorbeeld:

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

Dit resulteert in de volgende markering in het timingspoor , samen met de tooltiptekst en eigenschappen: