Présentation
Le panneau Performances est compatible avec l'API d'extensibilité des performances, qui vous permet d'ajouter vos propres données personnalisées à la chronologie des performances.
Cette API exploite l'API User Timing existante. Elle vous permet d'injecter vos mesures et événements directement dans la chronologie des performances, en tant que suivi personnalisé ou Durée. Cela peut être utile pour les développeurs de frameworks, de bibliothèques et d'applications complexes avec une instrumentation personnalisée afin d'obtenir une compréhension plus complète des performances.
Principales fonctionnalités
- Canaux personnalisés : créez des canaux dédiés pour visualiser vos propres données temporelles.
- Enregistrements : renseignez les pistes avec des enregistrements représentant des événements ou des mesures.
- Info-bulles et informations détaillées: fournissez un contexte riche pour les entrées grâce à des info-bulles personnalisables et des vues détaillées.
- Repères: mettez en avant des moments spécifiques de la chronologie à l'aide de repères visuels.
Injecter vos données avec l'API User Timings
Pour injecter des données personnalisées, incluez un objet devtools
dans la propriété detail
des méthodes performance.mark
et performance.measure
. La structure de cet objet devtools
détermine la manière dont vos données s'affichent dans le panneau Performance.
Utilisez
performance.mark
pour enregistrer un événement instantané ou un horodatage dans la chronologie. Vous pouvez marquer le début ou la fin d'une opération spécifique, ou de tout point d'intérêt sans durée. Lorsque vous incluez un objetdevtools
dans la propriétédetail
, le panneau Performances affiche un repère personnalisé dans la chronologie.Utilisez
performance.measure
pour mesurer la durée d'une tâche ou d'un processus. Lorsque vous incluez un objetdevtools
dans la propriétédetail
, le panneau Performances affiche des entrées de mesure personnalisées dans la chronologie. Si vous utilisezperformance.mark
comme point de référence pour créer unperformance.measure
, vous n'avez pas besoin d'inclure l'objetdevtools
dans les appelsperformance.mark
.
Objet devtools
Ces types définissent la structure de l'objet devtools
pour différentes fonctionnalités d'extension:
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
}
Afficher vos données dans la chronologie
Pour afficher vos données personnalisées dans la chronologie, dans le panneau Performances, activez
Capture settings > Extension data (Paramètres > Paramètres de capture > Cocher la case "Données d'extension").Essayez-le sur cette page de démonstration. Activez Données d'extension, lancez un enregistrement des performances, cliquez sur Ajouter un nouveau Corgi sur la page de démonstration, puis arrêtez l'enregistrement. Dans la trace, vous verrez un canal personnalisé contenant des événements avec des info-bulles et des détails personnalisés dans l'onglet Récapitulatif.
Exemples de code
Dans les sections suivantes, vous trouverez des exemples de code qui montrent comment ajouter les éléments suivants à la chronologie des performances :
Pistes et entrées personnalisées
Créez des canaux personnalisés et ajoutez-leur des entrées pour visualiser vos données de performances dans un canal personnalisé. Exemple :
// 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"
}
}
});
Cela se traduit par l'entrée de suivi personnalisé suivante dans la chronologie des performances, avec le texte et les propriétés de l'info-bulle associée:
Repères
Mettez en avant visuellement des points d'intérêt spécifiques dans la chronologie à l'aide de repères personnalisés qui s'étendent sur toutes les pistes. Exemple :
// 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"
}
}
});
Le repère suivant s'affiche dans le canal Timings, avec son texte d'info-bulle et ses propriétés :