Panoramica
Il riquadro Performance supporta l'API Performance Extensibility (API Performance Extensibility), che ti consente di aggiungere i tuoi dati personalizzati alla sequenza temporale del rendimento.
Questa API sfrutta l'API User Timings esistente e ti consente di inserire le misurazioni e gli eventi direttamente nella cronologia del rendimento come canale personalizzato o nel canale Tempi. Ciò può essere utile per gli sviluppatori di framework, librerie e applicazioni complesse con strumenti di misurazione personalizzati per ottenere una comprensione più completa delle prestazioni.
Funzionalità principali
- Canali personalizzati: crea canali dedicati per visualizzare i tuoi dati basati sul tempo.
- Voce: compila i canali con voci che rappresentano eventi o misurazioni.
- Descrizione dei comandi e dettagli: fornisci un contesto dettagliato per le voci, con descrizioni comando personalizzabili e visualizzazioni dettagliate.
- Indicatori: metti in evidenza momenti specifici nella sequenza temporale con gli indicatori visivi.
Inserire i dati con l'API User Timings
Per inserire dati personalizzati, includi un oggetto devtools
nella proprietà detail
dei metodi performance.mark
e performance.measure
. La struttura di questo oggetto devtools
determina il modo in cui i dati vengono visualizzati nel riquadro Rendimento.
Utilizza
performance.mark
per registrare un evento istantaneo o un timestamp nella sequenza temporale. Puoi contrassegnare l'inizio o la fine di un'operazione specifica o di qualsiasi punto d'interesse senza durata. Se includi un oggettodevtools
nella proprietàdetail
, il riquadro Rendimento mostra un indicatore personalizzato nella sequenza temporale.Utilizza
performance.measure
per misurare la durata di un'attività o di un processo. Se includi un oggettodevtools
nella proprietàdetail
, il riquadro Rendimento mostra le voci di misurazione personalizzate nella sequenza temporale. Se utilizziperformance.mark
come punto di riferimento per creare unperformance.measure
, non è necessario includere l'oggettodevtools
nelle chiamateperformance.mark
.
devtools
oggetto
Questi tipi definiscono la struttura dell'oggetto devtools
per funzionalità di estensione diverse:
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
}
Visualizzare i dati nella cronologia
Per visualizzare i dati personalizzati nella sequenza temporale, nel riquadro Rendimento attiva
Impostazioni di acquisizione > Dati dell'estensione.Prova questa funzionalità su questa pagina dimostrativa. Attiva Dati delle estensioni, avvia una registrazione del rendimento, fai clic su Aggiungi nuovi corgi nella pagina di dimostrazione e poi interrompi la registrazione. Nella traccia vedrai un canale personalizzato che contiene eventi con descrizioni comando e dettagli personalizzati nella scheda Riepilogo.
Esempi di codice
Nelle sezioni successive, consulta gli esempi di codice che mostrano come aggiungere quanto segue alla cronologia del rendimento:
Canali e voci personalizzati
Crea canali personalizzati e compilali con voci per visualizzare i dati sul rendimento in un canale personalizzato. Ad esempio:
// 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"
}
}
});
Questo determina la seguente voce di traccia personalizzata nella sequenza temporale del rendimento, insieme al testo della descrizione comando e alle proprietà:
Indicatori
Evidenzia visivamente i punti d'interesse specifici nella sequenza temporale con indicatori personalizzati che si estendono su tutti i percorsi. Ad esempio:
// 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"
}
}
});
Il risultato è il seguente indicatore nella traccia Tempi, insieme al testo e alle proprietà della relativa descrizione comando: