Compartilhar um rastreamento de desempenho com mais dados

Os dados gravados pela ferramenta Desempenho podem ser exportados para arquivos no disco, que também podem incluir anotações, conteúdo de recursos (conteúdo HTML, CSS e JavaScript) e mapas de origem. Os arquivos exportados são chamados de rastreamentos. Um rastreamento exportado é um .json arquivo que pode ser importado no DevTools a qualquer momento.

Ao exportar um rastreamento da ferramenta Desempenho, você pode escolher se deseja incluir dados adicionais:

  • Anotações.
  • Conteúdo do recurso (como conteúdo HTML, CSS e JavaScript).
  • Mapas de origem do script.

Você também pode controlar se o arquivo de rastreamento é compactado.

A ferramenta Desempenho registra dados de tempo de execução sobre sua página da Web. Explorar os dados gravados possibilita melhorar o desempenho do tempo de execução da página da Web.

A exportação de rastreamentos de desempenho é útil quando você deseja compartilhar esses arquivos com outras pessoas para obter ajuda na investigação de problemas.

Os rastreamentos podem ser salvos para incluir anotações, conteúdo de recursos (como scripts) e mapas de origem da página da Web. Essas informações adicionais facilitam a análise de um arquivo de rastreamento importado, recriando o ambiente no qual o rastreamento foi gravado e fornecendo arquivos de origem originais.

Os arquivos de rastreamento exportados são compatíveis com outros navegadores baseados no mecanismo do Chromium.

Quando um rastreamento que inclui anotações, conteúdo de recursos (como scripts) ou mapas de origem é importado no DevTools, uma nova janela do DevTools é exibida. Essa nova janela não está conectada à página da Web que está sendo executada no navegador e recria parte do ambiente no qual o rastreamento foi originalmente gravado. Esta instância do DevTools contém apenas as ferramentas Desempenho e Fontes .

Exportar um rastreamento da ferramenta Desempenho

Para registrar o desempenho de aspectos de uma página da Web e, em seguida, exportar uma gravação de desempenho:

  1. Abra uma página da Web, como Tarefas Pendentes, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, abra a ferramenta Desempenho (ícone de desempenho).

  4. Clique no botão Gravar (ícone de Gravação).

  5. Interaja com a página da Web para executar o cenário do qual você deseja investigar o desempenho.

    Por exemplo, na página de demonstração, na caixa de texto Adicionar uma tarefa , digite task 1e pressione Enter.

  6. Clique no botão Parar (ícone Parar).

    O perfil de desempenho é exibido.

  7. Clique no botão Salvar rastreamento (ícone Salvar rastreamento).

    A caixa de diálogo Salvar rastreamento de desempenho é aberta (na ferramenta Desempenho ):

    A caixa de diálogo Salvar rastreamento de desempenho

  8. Marque ou desmarque as caixas de seleção para controlar quais informações incluir no arquivo de rastreamento:

    • A caixa de seleção Incluir anotações . Essa caixa de seleção só será exibida se houver anotações.

    • A caixa de seleção Incluir conteúdo de recursos .

    • A caixa de seleção Incluir mapas de origem do script . (Primeiro é necessário marcar a caixa de seleção Incluir conteúdo de recursos .)

    Opcionalmente, desmarque a caixa de seleção Compactar com gzip .

    Os detalhes sobre essas caixas de seleção estão abaixo.

  9. Clique no botão Salvar .

    A pequena caixa de diálogo na ferramenta Desempenho é fechada e a caixa de diálogo Salvar como é aberta.

  10. Navegue até uma pasta para salvar o arquivo de rastreamento em seu disco.

    Por exemplo, no Windows, no /Downloads/ diretório, clique no botão Nova pasta e crie um /traces/ diretório para salvar o arquivo de rastreamento de desempenho:

    pasta Rastreamentos

  11. Aceite ou modifique o nome do arquivo, como Trace-20251103T154500.json.

  12. Clique no botão Salvar .

    O arquivo de rastreamento de desempenho é salvo, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.

Incluir anotações

Na caixa de diálogo Salvar rastreamento de desempenho na ferramenta Desempenho , a caixa de seleção Incluir anotações controla se as anotações que foram adicionadas a um perfil de desempenho.

As anotações ajudam a chamar a atenção e realçar seções específicas de um rastreamento, facilitando a compreensão de detalhes ao exibir o rastreamento.

Veja também:

Incluir conteúdo de recurso

Na caixa de diálogo Salvar rastreamento de desempenho na ferramenta Desempenho , marcar a caixa de seleção Incluir conteúdo de recurso inclui o conteúdo de arquivos HTML, arquivos CSS e scripts JavaScript no arquivo de rastreamento exportado. Todos os scripts carregados (exceto extensões) são salvos no arquivo de rastreamento.

Quando o arquivo de rastreamento é importado posteriormente para o DevTools, esses recursos podem ser exibidos na ferramenta Fontes . A ferramenta Fontes resolve referências de código-fonte encontradas no rastreamento importado para exibir o código-fonte original.

Scripts de extensão

Alguns insights de desempenho exigem conteúdo de recursos (como scripts) para análise. O conteúdo dos scripts de extensão não é incluído no arquivo de rastreamento, mesmo quando essa caixa de seleção está marcada, pois os scripts de extensão podem conter informações confidenciais.

No entanto, os dados de criação de perfil dos scripts de extensão ainda são salvos no arquivo de rastreamento, pois os scripts de extensão podem afetar o desempenho.

Veja também:

Incluir mapas de origem de script

Na caixa de diálogo Salvar rastreamento de desempenho na ferramenta Desempenho , marcar a caixa de seleção Incluir mapas de origem do script inclui arquivos de conteúdo de produção minificados e os mapeamentos de volta para os arquivos de código-fonte originais. Os mapas de origem são usados pelo DevTools para carregar seus arquivos originais e substituir o código minificado pelo código original.

Quando o arquivo de rastreamento resultante for aberto posteriormente, a ferramenta Desempenho exibirá os nomes de função originais e a ferramenta Fontes mostrará os nomes de arquivo originais. Cuidado: Isso pode expor o código-fonte ao destinatário do arquivo de rastreamento.

Alguns insights de desempenho requerem mapas de origem para análise. Consulte Obter insights acionáveis na referência de recursos de desempenho.

Para tornar essa caixa de seleção disponível em vez de esmaecida, você deve marcar a caixa de seleção Incluir conteúdo de recurso , que inclui conteúdo de script no arquivo de rastreamento.

Veja também:

Compactar com gzip

Na caixa de diálogo Salvar rastreamento de desempenho na ferramenta Desempenho , a caixa de seleção Compactar com gzip está marcada por padrão. Essa opção ajuda a compactar grandes rastreamentos de desempenho para economizar espaço em disco e torna a importação e o processamento de arquivos de rastreamento mais rápidos no DevTools.

  • Se essa caixa de seleção estiver marcada, a extensão de nome de arquivo padrão será .gz.
  • Se essa caixa de seleção estiver desmarcada, a extensão de nome de arquivo padrão será .json.

Abrir um arquivo de rastreamento de desempenho no DevTools

Quando um arquivo de rastreamento é aberto (importado) no DevTools, uma nova guia especializada do DevTools é aberta no navegador, contendo apenas as ferramentas Desempenho e Fontes . O rastreamento pode incluir anotações, conteúdo de recursos (como scripts) e mapas de origem. Essa nova guia não está conectada à página da Web em execução no navegador e, em vez disso, recria parte do ambiente no qual o rastreamento foi originalmente gravado.

Para abrir um arquivo de rastreamento salvo no DevTools:

  1. Abra o Microsoft Edge ou outro navegador baseado em Chromium.

  2. Clique com o botão direito do mouse na página da Web ou na guia vazia e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Desempenho (ícone de desempenho).

  4. Clique no botão Carregar rastreamento (ícone Carregar rastreamento).

    A caixa de diálogo Abrir é aberta.

  5. Navegue até um arquivo de rastreamento compartilhado, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz.

  6. Selecione o arquivo, como o arquivo Trace-20251103T154500.json.gzcompactado .

  7. Clique no botão Abrir .

    Uma guia especial do DevTools é aberta no navegador, totalmente preenchida com DevTools, abrindo as ferramentas Fontes e Desempenho :

    Guia especial do DevTools

    A barra de endereços exibe uma URL especial, como:

    • devtools://devtools/bundled/trace_app.html
    • devtools://devtools/bundled/rehydrated_devtools_app.html

    Esta é uma guia especial dedicada ao DevTools do navegador, em vez da janela DevTools desencaixada. Algumas outras ferramentas relevantes que podem ser úteis para analisar o rastreamento podem ser acessadas clicando no botão Mais ferramentas , como:

    • Recursos de desenvolvedor
    • Fonte rápida
    • Renderização
    • Pesquisa
    • Sensores

Veja também:

Confira também

Ferramenta Fontes :

Ferramenta Desempenho :

GitHub:

Documentos do Chrome:

  • Last updated on