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 ().

4. Clique no botão Gravar ().

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 ().

   O perfil de desempenho é exibido.

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

   A caixa de diálogo Salvar rastreamento de desempenho é aberta (na ferramenta 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:

    

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:

• Anote uma gravação e compartilhe-a em Referência de recursos de desempenho.

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:

• Recursos de depuração do JavaScript
• Executar trechos do JavaScript em qualquer página da Web
• Uso da guia Snippets para executar snippets de código JavaScript em qualquer página da Web na visão geral da ferramenta Fontes.
• Usando a guia Scripts de conteúdo para extensões do Microsoft Edge na ferramenta Fontes.

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:

• Mapear o código processado para o código-fonte original, para depuração

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 ().

4. Clique no botão 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 :

   

   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:

• Ferramenta Desempenho: Analise o desempenho do seu site
• Visão geral da ferramenta Fontes

Confira também

• Compartilhar um rastreamento de memória com mais dados

Ferramenta Fontes :

• Visão geral da ferramenta Fontes
  • Usando a guia Scripts de conteúdo para extensões do Microsoft Edge na ferramenta Fontes.
  • Uso da guia Snippets para executar snippets de código JavaScript em qualquer página da Web na visão geral da ferramenta Fontes.
• Recursos de depuração do JavaScript
• Executar trechos do JavaScript em qualquer página da Web
• Mapear o código processado para o código-fonte original, para depuração

Ferramenta Desempenho :

• Ferramenta Desempenho: Analise o desempenho do seu site
• Referência de recursos de desempenho
  • Anote uma gravação e compartilhe-a em Referência de recursos de desempenho.
  • Obtenha insights acionáveis na Referência de recursos de desempenho.

GitHub:

• Para fazer demonstração.

Documentos do Chrome:

• Salvar e compartilhar rastreamentos de desempenho