chrome.devtools.performance

Descrizione

Usa l'API chrome.devtools.recorder per personalizzare il riquadro Registratore in DevTools.

Consulta il riepilogo delle API di DevTools per un'introduzione generale all'utilizzo delle API degli strumenti per sviluppatori.

Disponibilità

Chrome 105 e versioni successive

Concetti e utilizzo

L'API chrome.devtools.performance consente agli sviluppatori di interagire con le funzionalità di registrazione del riquadro Rendimento in Chrome DevTools. Puoi utilizzare questa API per ricevere notifiche quando la registrazione inizia o si interrompe.

Sono disponibili due eventi:

  • onProfilingStarted: questo evento viene attivato quando il riquadro Rendimento inizia a registrare i dati sul rendimento.
  • onProfilingStopped: questo evento viene attivato quando il riquadro Rendimento smette di registrare i dati sul rendimento. la posizione che associa l'analisi dello stack attuale alla richiesta di creazione A entrambi gli eventi non sono associati parametri.

Ascoltando questi eventi, gli sviluppatori possono creare estensioni che reagiscono allo stato della registrazione nel riquadro Rendimento, fornendo ulteriore automazione durante la profilazione del rendimento.

Esempi

Ecco come puoi utilizzare l'API per ascoltare gli aggiornamenti sullo stato della registrazione


chrome.devtools.performance.onProfilingStarted.addListener(() => {
  // Profiling started listener implementation
});

chrome.devtools.performance.onProfilingStopped.addListener(() => {
  // Profiling stopped listener implementation
})

Tipi

RecorderExtensionPlugin

Un'interfaccia plug-in attivata dal riquadro Registratore per personalizzare il riquadro Registratore.

Proprietà

  • guarda di nuovo

    null

    Chrome 112 e versioni successive

    Consente all'estensione di implementare la funzionalità di riproduzione personalizzata.

    La funzione replay ha questo aspetto: 

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

  • stringify

    null

    Converte una registrazione dal formato del pannello Registratore in una stringa.

    La funzione stringify ha questo aspetto: 

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

  • stringifyStep

    null

    Converte un passaggio della registrazione dal formato del pannello Registratore in una stringa.

    La funzione stringifyStep ha questo aspetto: 

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

RecorderView

Chrome 112 e versioni successive

Rappresenta una visualizzazione creata per estensione per essere incorporata nel riquadro Registratore.

Proprietà

  • onHidden

    Evento<functionvoidvoid>

    Attivato quando la visualizzazione è nascosta.

    La funzione onHidden.addListener ha questo aspetto: 

    (callback: function) => {...}

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • onShown

    Evento<functionvoidvoid>

    Attivato quando viene mostrata la visualizzazione.

    La funzione onShown.addListener ha questo aspetto: 

    (callback: function) => {...}

    • callback

      funzione

      Il parametro callback ha il seguente aspetto: 

      () => void

  • mostra

    null

    Indica che l'estensione vuole mostrare questa visualizzazione nel riquadro Registratore.

    La funzione show ha questo aspetto: 

    () => {...}

Metodi

createView()

Chrome 112 e versioni successive 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Crea una visualizzazione in grado di gestire la riproduzione. Questa visualizzazione verrà incorporata all'interno del riquadro Registratore.

Parametri

  • titolo

    stringa

    Titolo visualizzato accanto all'icona dell'estensione nella barra degli strumenti degli Strumenti per sviluppatori.

  • pagePath

    stringa

    Percorso della pagina HTML del riquadro relativo alla directory dell'estensione.

Resi

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)

Registra un plug-in dell'estensione Registratore.

Parametri

  • Un'istanza che implementa l'interfaccia RecorderEstensioneplugin.

  • nome

    stringa

    Il nome del plug-in.

  • mediaType

    stringa

    Il tipo multimediale dei contenuti della stringa prodotto dal plug-in.