chrome.devtools.performance

Descrição

Use a API chrome.devtools.recorder para personalizar o painel do Gravador no DevTools.

Consulte o resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.

Disponibilidade

Chrome 105 ou mais recente

Conceitos e uso

A API chrome.devtools.performance permite que os desenvolvedores interajam com os recursos de gravação do painel Performance no Chrome DevTools. Você pode usar essa API para receber notificações quando a gravação for iniciada ou interrompida.

Dois eventos estão disponíveis:

  • onProfilingStarted: esse evento é disparado quando o painel Performance começa a registrar dados de desempenho.
  • onProfilingStopped: esse evento é disparado quando o painel Desempenho para de gravar dados de desempenho. que associa o stack trace atual ao comando "cr" Ambos os eventos não têm parâmetros associados.

Ao detectar esses eventos, os desenvolvedores podem criar extensões que reagem ao status da gravação no painel Desempenho, fornecendo mais automação durante a criação de perfil de desempenho.

Exemplos

É assim que você pode usar a API para detectar atualizações de status de registro.


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

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

Tipos

RecorderExtensionPlugin

Uma interface de plug-in que o painel Gravador invoca para personalizar o painel Gravador.

Propriedades

  • repetir vídeo

    void

    Chrome 112 ou versões mais recentes

    Permite que a extensão implemente a funcionalidade de repetição personalizada.

    A função replay tem esta aparência: 

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

  • stringify

    void

    Converte uma gravação do formato do painel do Gravador em uma string.

    A função stringify tem esta aparência: 

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

  • stringifyStep

    void

    Converte uma etapa da gravação do formato do painel Gravador em uma string.

    A função stringifyStep tem esta aparência: 

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

RecorderView

Chrome 112 ou versões mais recentes

Representa uma visualização criada por extensão para ser incorporada dentro do painel do Gravador.

Propriedades

  • onHidden

    Evento<functionvoidvoid>

    Disparado quando a visualização está oculta.

    A função onHidden.addListener tem esta aparência: 

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

    • callback

      função

      O parâmetro callback tem esta aparência: 

      () => void

  • onShown

    Evento<functionvoidvoid>

    Disparado quando a visualização é exibida.

    A função onShown.addListener tem esta aparência: 

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

    • callback

      função

      O parâmetro callback tem esta aparência: 

      () => void

  • mostrar

    void

    Indica que a extensão quer mostrar esta visualização no painel Gravador.

    A função show tem esta aparência: 

    () => {...}

Métodos

createView()

Chrome 112 ou versões mais recentes 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

Cria uma visualização que pode processar a repetição. Essa visualização será incorporada ao painel do Gravador.

Parâmetros

  • título

    string

    Título exibido ao lado do ícone da extensão na barra de ferramentas das Ferramentas para desenvolvedores.

  • pagePath

    string

    Caminho da página HTML do painel relativo ao diretório de extensão.

Retorna

registerRecorderExtensionPlugin()

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

Registra um plug-in de extensão do Gravador.

Parâmetros

  • Uma instância que implementa a interface RecorderExtensionPlugin.

  • nome

    string

    O nome do plug-in.

  • mediaType

    string

    O tipo de mídia do conteúdo da string que o plug-in produz.