Description
Utilisez l'API chrome.devtools.recorder
pour personnaliser le panneau "Enregistreur" dans les outils de développement.
Consultez le récapitulatif des API d'outils de développement pour obtenir une présentation générale de l'utilisation des API des outils de développement.
Disponibilité
Concepts et utilisation
L'API chrome.devtools.performance permet aux développeurs d'interagir avec les fonctionnalités d'enregistrement du panneau Performances dans les outils pour les développeurs Chrome. Vous pouvez utiliser cette API pour recevoir des notifications lorsque l'enregistrement démarre ou s'arrête.
Deux événements sont disponibles:
- onProfilingStarted: cet événement est déclenché lorsque le panneau Performance commence à enregistrer des données sur les performances.
- onProfilingStopped: cet événement est déclenché lorsque le panneau Performance cesse d'enregistrer des données sur les performances. et l'instance qui associe la trace de la pile actuelle à la création Les deux événements ne sont associés à aucun paramètre.
En écoutant ces événements, les développeurs peuvent créer des extensions qui réagissent à l'état d'enregistrement dans le panneau Performances, ce qui offre une automatisation supplémentaire lors du profilage des performances.
Exemples
Voici comment utiliser l'API pour écouter les mises à jour de l'état de l'enregistrement
chrome.devtools.performance.onProfilingStarted.addListener(() => {
// Profiling started listener implementation
});
chrome.devtools.performance.onProfilingStopped.addListener(() => {
// Profiling stopped listener implementation
})
Types
RecorderExtensionPlugin
Interface de plug-in appelée par le panneau "Enregistreur" pour personnaliser ce panneau.
Propriétés
-
revoir
vide
Chrome 112 et versions ultérieuresPermet à l'extension d'implémenter une fonctionnalité de relecture personnalisée.
La fonction
replay
se présente comme suit:(recording: object) => {...}
-
enregistrement
objet
Enregistrement de l'interaction de l'utilisateur avec la page Il doit correspondre au schéma d'enregistrement de Puppeteer.
-
-
stringify
vide
Convertit un enregistrement au format du panneau "Enregistreur" en chaîne.
La fonction
stringify
se présente comme suit:(recording: object) => {...}
-
enregistrement
objet
Enregistrement de l'interaction de l'utilisateur avec la page Il doit correspondre au schéma d'enregistrement de Puppeteer.
-
-
stringifyStep
vide
Convertit une étape de l'enregistrement au format du panneau "Enregistreur" en chaîne.
La fonction
stringifyStep
se présente comme suit:(step: object) => {...}
-
étape
objet
Étape de l'enregistrement d'une interaction de l'utilisateur avec la page. Il doit correspondre au schéma de pas de Puppeteer.
-
RecorderView
Représente une vue créée par une extension à intégrer dans le panneau "Enregistreur".
Propriétés
-
onHidden
Événement<functionvoid>
Déclenché lorsque la vue est masquée
La fonction
onHidden.addListener
se présente comme suit:(callback: function) => {...}
-
rappel
fonction
Le paramètre
callback
se présente comme suit:() => void
-
-
onShown
Événement<functionvoid>
Déclenché lorsque la vue est affichée.
La fonction
onShown.addListener
se présente comme suit:(callback: function) => {...}
-
rappel
fonction
Le paramètre
callback
se présente comme suit:() => void
-
-
afficher
vide
Indique que l'extension souhaite afficher cette vue dans le panneau "Enregistreur".
La fonction
show
se présente comme suit:() => {...}
Méthodes
createView()
chrome.devtools.recorder.createView(
title: string,
pagePath: string,
)
Crée une vue capable de gérer la relecture. Cette vue sera intégrée dans le panneau "Enregistreur".
Paramètres
-
titre
chaîne
Titre affiché à côté de l'icône de l'extension dans la barre d'outils des outils pour les développeurs.
-
pagePath
chaîne
Chemin de la page HTML du panneau relative au répertoire de l'extension.
Renvoie
registerRecorderExtensionPlugin()
chrome.devtools.recorder.registerRecorderExtensionPlugin(
plugin: RecorderExtensionPlugin,
name: string,
mediaType: string,
)
Enregistre un plug-in d'extension Enregistreur.
Paramètres
-
plug-in
Instance qui implémente l'interface RecorderExtensionPlugin.
-
nom
chaîne
Nom du plug-in.
-
mediaType
chaîne
Type de contenu du contenu de chaîne généré par le plug-in.