Personalizza i dati sulle prestazioni con l'API estensibilità

Andrés Olivares

Sofia Emelianova

Panoramica

Il riquadro Rendimento supporta l'API di estensioni del rendimento che ti consente di aggiungere i tuoi dati personalizzati alla cronologia 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

• Tracce personalizzate: crea tracce dedicate per visualizzare i tuoi dati basati sul tempo.
• Voce: compila i canali con voci che rappresentano eventi o misurazioni.
• Descrizioni comando e dettagli: fornisci un contesto completo per le voci con descrizioni comando e visualizzazioni dettagliate personalizzabili.
• Indicatori: metti in evidenza momenti specifici della sequenza temporale con indicatori visivi.

Inserire i dati con l'API User Timings

Per inserire dati personalizzati, includi un oggetto devtools all'interno della 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 che non ha una durata. Quando includi un oggetto devtools all'interno della proprietà detail, il riquadro Rendimento mostra un indicatore personalizzato nella traccia Tempi.

• Utilizza performance.measure per misurare la durata di un'attività o di un processo. Quando includi un oggetto devtools all'interno della proprietà detail, il riquadro Rendimento mostra le voci di misurazione personalizzate nella sequenza temporale in un canale personalizzato. Se utilizzi performance.mark come punto di riferimento per creare un performance.measure, non devi includere l'oggetto devtools nelle chiamate a performance.mark.

devtools oggetto

Questi tipi definiscono la struttura dell'oggetto devtools per diverse funzionalità di estensione:

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 Impostazioni di acquisizione > casella di controllo Dati dell'estensione.

Prova questa pagina demo. 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 viene visualizzato un canale personalizzato contenente 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 nella sequenza temporale
• Indicatori per la traccia Tempi

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

Il risultato è la seguente voce del canale personalizzato nella cronologia del rendimento, insieme al testo e alle proprietà della descrizione comando:

Indicatori

Evidenzia visivamente punti di interesse specifici nella sequenza temporale con indicatori personalizzati che si estendono su tutte le tracce. 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: