Partilhar um rastreio de desempenho com mais dados

Os dados registados pela ferramenta Desempenho podem ser exportados para ficheiros no disco, que também podem incluir anotações, conteúdos de recursos (conteúdo HTML, CSS e JavaScript) e mapas de origem. Os ficheiros exportados são denominados rastreios. Um rastreio exportado é um .json ficheiro que pode ser importado em DevTools em qualquer altura.

Ao exportar um rastreio da ferramenta Desempenho, pode escolher se pretende incluir dados adicionais:

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

Também pode controlar se o ficheiro de rastreio está comprimido.

A Ferramenta de desempenho regista dados de runtime sobre a sua página Web. Explorar os dados registados permite melhorar o desempenho do runtime da sua página Web.

A exportação de rastreios de desempenho é útil quando pretende partilhar estes ficheiros com outras pessoas, para obter ajuda para investigar problemas.

Os rastreios podem ser guardados para incluir anotações, conteúdos de recursos (como scripts) e mapas de origem da página Web. Estas informações adicionais facilitam a análise de um ficheiro de rastreio importado ao recriar o ambiente no qual o rastreio foi gravado e ao fornecer ficheiros de origem originais.

Os ficheiros de rastreio exportados são compatíveis com outros browsers baseados no motor de Chromium.

Quando um rastreio que inclui anotações, o conteúdo do recurso (como scripts) ou mapas de origem é importado em DevTools, é apresentada uma nova janela DevTools. Esta nova janela não está ligada à página Web que está a ser executada no browser e, em vez disso, recria parte do ambiente no qual o rastreio foi originalmente gravado. Esta instância de DevTools contém apenas as ferramentas Desempenho e Origens .

Exportar um rastreio da ferramenta Desempenho

Para registar o desempenho de aspetos de uma página Web e, em seguida, exportar uma gravação de desempenho:

Abra uma página Web, como To do, numa nova janela ou separador.
Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

O DevTools é aberto.
Em DevTools, abra a ferramenta Desempenho ().
Clique no botão Gravar ().
Interaja com a página Web para executar o cenário do qual pretende investigar o desempenho.

Por exemplo, na página de demonstração, na caixa de texto Adicionar uma tarefa , escreva task 1e, em seguida, prima Enter.
Clique no botão Parar ().

O perfil de desempenho é apresentado.
Clique no botão Guardar rastreio ().

A caixa de diálogo Guardar rastreio de desempenho é aberta (na ferramenta Desempenho ):
Selecione ou desmarque as caixas de verificação para controlar as informações a incluir no ficheiro de rastreio:
- A caixa de verificação Incluir anotações . Esta caixa de verificação só é apresentada se existirem anotações.
- A caixa de verificação Incluir conteúdo do recurso .
- A caixa de verificação Incluir mapas de origem de script . (Tem primeiro de selecionar a caixa de verificação Incluir conteúdo do recurso .)
Opcionalmente, desmarque a caixa de verificação Comprimir com gzip .

Os detalhes sobre estas caixas de verificação encontram-se abaixo.
Clique no botão Guardar .

A caixa de diálogo pequena na ferramenta Desempenho é fechada e a caixa de diálogo Guardar Como é aberta.
Navegue para uma pasta na qual pretende guardar o ficheiro de rastreio no disco.

Por exemplo, no Windows, no diretório, clique no /Downloads/ botão Nova pasta e, em seguida, crie um /traces/ diretório para guardar o ficheiro de rastreio de desempenho:
Aceite ou modifique o nome do ficheiro, como Trace-20251103T154500.json.
Clique no botão Guardar .

O ficheiro de rastreio de desempenho é guardado, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.

Incluir anotações

Na caixa de diálogo Guardar rastreio de desempenho na ferramenta Desempenho , a caixa de verificação Incluir anotações controla se deve incluir anotações que foram adicionadas a um perfil de desempenho.

As anotações ajudam a chamar a atenção e a realçar secções específicas de um rastreio, tornando mais fácil compreender os detalhes ao ver o rastreio.

Veja também:

Anotar uma gravação e partilhá-la na referência de Funcionalidades de desempenho.

Incluir conteúdo de recurso

Na caixa de diálogo Guardar rastreio de desempenho na ferramenta Desempenho , a seleção da caixa de verificação Incluir conteúdo do recurso inclui os conteúdos de ficheiros HTML, ficheiros CSS e scripts JavaScript no ficheiro de rastreio exportado. Todos os scripts carregados (exceto extensões) são guardados no ficheiro de rastreio.

Quando o ficheiro de rastreio é posteriormente importado para DevTools, estes recursos podem ser visualizados na ferramenta Origens . A ferramenta Origens resolve as referências de código fonte encontradas no rastreio importado para apresentar o código fonte original.

Scripts de extensão

Algumas Informações de desempenho requerem conteúdo de recursos (como scripts) para análise. Os conteúdos dos scripts de extensão não estão incluídos no ficheiro de rastreio, mesmo quando esta caixa de verificação está selecionada, porque os scripts de extensão podem conter informações confidenciais.

No entanto, os dados de criação de perfis de scripts de extensão ainda são guardados no ficheiro de rastreio, porque os scripts de extensão podem afetar o desempenho.

Veja também:

Funcionalidades de depuração de JavaScript
Executar fragmentos de JavaScript em qualquer página Web
Utilizar o separador Fragmentos para executar fragmentos de código JavaScript em qualquer página Web na descrição geral da ferramenta Origens.
Utilizar o separador Scripts de conteúdo para extensões do Microsoft Edge na descrição geral da ferramenta Origens.

Incluir mapas de origem de scripts

Na caixa de diálogo Guardar rastreio de desempenho na ferramenta Desempenho , selecionar a caixa de verificação Incluir mapas de origem de script inclui ficheiros de conteúdo de produção minificados e os mapeamentos para os ficheiros de código fonte originais. Os mapas de origem são utilizados pelas DevTools para carregar os seus ficheiros originais e substituir o código minificado pelo código original.

Quando o ficheiro de rastreio resultante for aberto posteriormente, a ferramenta Desempenho apresentará os nomes das funções originais e a ferramenta Origens mostrará os nomes de ficheiro originais. Atenção: isto pode expor o código fonte ao destinatário do ficheiro de rastreio.

Algumas Informações de desempenho requerem mapas de origem para análise. Veja Obter informações acionáveis na Referência de funcionalidades de desempenho.

Para disponibilizar esta caixa de verificação em vez de desativada, tem de selecionar a caixa de verificação Incluir conteúdo do recurso , que inclui o conteúdo do script no ficheiro de rastreio.

Veja também:

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

Comprimir com gzip

Na caixa de diálogo Guardar rastreio de desempenho na ferramenta Desempenho , a caixa de verificação Comprimir com gzip está selecionada por predefinição. Esta opção ajuda a comprimir grandes rastreios de desempenho para poupar espaço em disco e torna a importação e o processamento de ficheiros de rastreio mais rápido no DevTools.

Se esta caixa de verificação estiver selecionada, a extensão de nome de ficheiro predefinida é .gz.
Se esta caixa de verificação estiver desmarcada, a extensão de nome de ficheiro predefinida é .json.

Abrir um ficheiro de rastreio de desempenho no DevTools

Quando um ficheiro de rastreio é aberto (importado) no DevTools, é aberto um novo separador DevTools especializado no browser, que contém apenas as ferramentas Desempenho e Origens . O rastreio pode incluir anotações, conteúdos de recursos (como scripts) e mapas de origem. Este novo separador não está ligado à página Web que está a ser executada no browser e, em vez disso, recria parte do ambiente no qual o rastreio foi originalmente gravado.

Para abrir um ficheiro de rastreio guardado no DevTools:

Abra o Microsoft Edge ou outro browser baseado em Chromium.
Clique com o botão direito do rato na página Web ou no separador vazio e, em seguida, selecione Inspecionar.

O DevTools é aberto.
Em DevTools, selecione a ferramenta Desempenho ().
Clique no botão Carregar rastreio ().

A caixa de diálogo Abrir é aberta.
Navegue para um ficheiro de rastreio partilhado, como C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz.
Selecione o ficheiro, como o ficheiro Trace-20251103T154500.json.gzzipado .
Clique no botão Abrir .

É aberto um separador DevTools especial no browser, totalmente preenchido com DevTools, abrindo as ferramentas Origens e Desempenho :

A Barra de endereço apresenta um URL especial, como:
- devtools://devtools/bundled/trace_app.html
- devtools://devtools/bundled/rehydrated_devtools_app.html
Este é um separador especial dedicado a DevTools do browser, em vez da janela DevTools desancorada. Algumas outras ferramentas relevantes que podem ser úteis para analisar o rastreio podem ser acedidas ao clicar no botão Mais ferramentas , como:
- Recursos de desenvolvedor
- Origem rápida
- Composição
- Pesquisa
- Sensores