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 eendevtools
object opneemt in dedetail
, 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 eendevtools
object opneemt in dedetail
, worden in het paneel Prestaties aangepaste meetgegevens weergegeven in de tijdlijn. Als uperformance.mark
als referentiepunt gebruikt om eenperformance.measure
te maken, hoeft u hetdevtools
object niet op te nemen inperformance.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 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: