chrome.devtools.performance

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é

Chrome 105 ou version ultérieure

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érieures

    Permet à l'extension d'implémenter une fonctionnalité de relecture personnalisée.

    La fonction replay se présente comme suit: 

    (recording: object) => {...}

  • stringify

    vide

    Convertit un enregistrement au format du panneau "Enregistreur" en chaîne.

    La fonction stringify se présente comme suit: 

    (recording: object) => {...}

  • 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

Chrome 112 et versions ultérieures

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 112 et versions ultérieures 
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

  • 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.