Compartilhar rastreamentos de memória e desempenho aprimorados

As ferramentas de desempenho e memória registram dados de runtime sobre sua página da Web. Explorar os dados gravados torna possível melhorar o uso de memória ou o desempenho de runtime da página da Web.

Além disso, os dados gravados podem ser exportados para arquivos em disco. Os arquivos exportados são chamados de rastreamentos.

Exportar rastreamentos de desempenho e memória é útil quando você deseja compartilhar esses arquivos com outras pessoas para obter ajuda para investigar problemas. Um rastreamento exportado é um .json, .heapsnapshot, .heapprofileou .heaptimeline arquivo que pode ser importado em DevTools a qualquer momento.

Por padrão, os rastreamentos contêm informações mínimas sobre os dados de runtime da página da Web rastreada, mas os rastreamentos também podem ser exportados como rastreamentos aprimorados, como um recurso experimental. Um rastreamento aprimorado é um .devtools arquivo que contém muito mais dados de runtime da página da Web rastreada. Os rastreamentos aprimorados facilitam resolve problemas de desempenho e memória recriando o ambiente em que o rastreamento foi gravado e fornecendo arquivos de origem originais.

O uso de rastreamentos aprimorados torna possível resolve referências de código-fonte encontradas em rastreamentos importados para o código de runtime real na ferramenta Fontes. Além disso, se os mapas de origem estiverem presentes quando um rastreamento foi gravado ou se eles forem armazenados no Servidor de Símbolos de Artefatos do Azure, também será possível resolve referências de código ao código-fonte original.

Diferenças entre rastreamentos normais e aprimorados

Rastreamentos normais

Um rastreamento normal contém apenas algumas das informações presentes em uma página da Web. Grande parte do código original é perdida e apenas os dados de desempenho ou memória gravados da página da Web são preservados no rastreamento. Por exemplo, ao importar um .heapsnapshot rastreamento de memória que foi gravado durante outra sessão de DevTools ou em outro computador, não há como ir de um objeto na ferramenta Memória para seu construtor na ferramenta Fontes .

Da mesma forma, na ferramenta Desempenho , quando você importa um rastreamento de desempenho registrado anteriormente:

• O rastreamento precisa ter sido registrado no mesmo site e na mesma configuração para poder mapear do relatório de desempenho para o JavaScript que estava em execução no navegador.
• Se os nomes de arquivo ou função tiverem sido alterados desde que a gravação foi feita, o mapeamento será propenso a erros.

Rastreamentos aprimorados

Um rastreamento aprimorado retém muito mais informações sobre a página da Web em que a gravação ocorreu. Por exemplo, um rastreamento aprimorado contém o contexto de execução e a lista de scripts analisados e, opcionalmente, pode conter mensagens de console, fontes de script e um instantâneo da árvore DOM.

Quando um rastreamento aprimorado é importado em DevTools, uma nova janela DevTools é exibida. Essa nova janela não está conectada à página da Web que está em execução no navegador e, em vez disso, recria parte do ambiente em que o rastreamento foi originalmente gravado.

Por exemplo, se um instantâneo do DOM foi registrado no rastreamento aprimorado, a ferramenta Elementos exibirá esse instantâneo. Se as mensagens de console foram gravadas, a ferramenta Console imprimirá essas mensagens. A ferramenta Fontes exibe os scripts presentes durante a gravação.

Os rastreamentos aprimorados só podem ser importados no Microsoft Edge, enquanto os rastreamentos normais são compatíveis com outros navegadores com base no mecanismo Chromium.

Definir o tipo de rastreamento padrão

Por padrão, as ferramentas desempenho e memória exportam dados como rastreamentos normais, mas você pode definir o tipo de rastreamento padrão como enhanced.

Para alterar o tipo de rastreamento:

1. Abra DevTools pressionando Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

2. Em DevTools, no canto superior direito, clique em Configurações (). As configurações são abertas, com a página Preferências selecionada.

3. Na seção Persistência da página Preferências , selecione a caixa de seleção Exportar rastreamentos de memória e desempenho aprimorados :

   

4. Os rastreamentos aprimorados também podem incluir opcionalmente mensagens de console, fontes de script e elementos DOM. Para controlar o que incluir em rastreamentos aprimorados, use estas caixas de seleção:

   • Incluir mensagem de console em rastreamentos aprimorados.
   • Inclua fontes de script em rastreamentos aprimorados.
   • Inclua instantâneos do DOM em rastreamentos aprimorados (experimental).

   

Exportar um rastreamento da ferramenta Desempenho

Para exportar uma gravação de desempenho da ferramenta Desempenho :

1. Abra a ferramenta Desempenho .

2. Clique em Gravar e execute o cenário do qual você deseja investigar o desempenho interagindo com a página da Web e clique em Parar.

3. Quando o perfil de desempenho for exibido, clique em Salvar perfil ():

   

4. Escolha um local para salvar o arquivo de rastreamento em seu disco:

   

   O rastreamento é um .json arquivo se você definir o tipo de rastreamento padrão como normal e ele for um .devtools arquivo se você definir o tipo de rastreamento padrão como aprimorado.

Exportar um rastreamento da ferramenta Memória

Para exportar informações de memória da ferramenta Memória :

1. Abra a ferramenta Memória .

2. Escolha o tipo de gravação de memória que você está interessado, como Heap Snapshot. As instruções a seguir são semelhantes se você escolher um tipo de gravação de memória diferente. Para saber mais sobre os diferentes tipos de gravação de memória, consulte Corrigir problemas de memória.

3. Clique em Tirar Instantâneo.

4. Quando o instantâneo for gravado, clique no botão Salvar na barra lateral da ferramenta Memória:

   

5. Escolha um local para salvar o arquivo de rastreamento em seu disco:

   

   O rastreamento é um .heapsnapshot, .heapprofileou .heaptimeline arquivo se você definir o tipo de rastreamento padrão como normal e ele for um .devtools arquivo se você definir o tipo de rastreamento padrão como aprimorado.

Escolha um tipo de rastreamento ao exportar

Os rastreamentos são exportados como rastreamentos normais ou aprimorados, dependendo da opção Exportar Rastreamentos de Memória e Desempenho Aprimorado . Para alterar o tipo de rastreamento padrão, consulte Definir o tipo de rastreamento padrão. Você também pode escolher o tipo de rastreamento desejado ao exportar.

Para escolher um tipo de rastreamento diferente ao exportar:

1. Clique com o botão direito do mouse (ou segure a tecla Ctrl e clique) no perfil Salvar () na ferramenta Desempenho ou no botão Salvar na ferramenta Memória .

2. Clique em .devtools (formato aprimorado para o Microsoft Edge) se quiser exportar um rastreamento aprimorado ou clique em .json (funciona com o Microsoft Edge e Chromium navegadores) se desejar um rastreamento normal.

   

Importar um rastreamento na ferramenta Desempenho

Para importar um rastreamento na ferramenta Desempenho :

1. Abra a ferramenta Desempenho .

2. Clique em Perfil de carga ():

   

3. Localize o arquivo de rastreamento em seu disco. É um .devtools arquivo (para rastreamentos aprimorados) ou um .json arquivo (para rastreamentos normais):

   

4. Abra o arquivo.

   Se o arquivo for um rastreamento aprimorado, uma nova janela DevTools será exibida, mostrando o perfil de desempenho e as informações extras de runtime que foram gravadas exibidas nas ferramentas Fontes, Console e Elementos .

   Se o arquivo for um rastreamento normal, o perfil de desempenho será exibido na ferramenta Desempenho e o restante das guias DevTools continuarão mostrando informações relacionadas à página da Web atual.

Importar um rastreamento na ferramenta Memória

Para importar um rastreamento na ferramenta Memória :

1. Abra a ferramenta Memória .

2. Clique em Carregar.

   

3. Localize o arquivo de rastreamento em seu disco. É um .devtools arquivo (para rastreamentos aprimorados) ou um .heapsnapshot, .heaptimelineou .heapprofile arquivo (para rastreamentos normais).

   

4. Abra o arquivo.

   Se o arquivo for um rastreamento aprimorado, uma nova janela DevTools será exibida, mostrando as informações de memória e as informações extras de runtime que foram gravadas exibidas nas ferramentas Fontes, Console e Elementos .

   Se o arquivo for um rastreamento normal, as informações de memória serão exibidas na ferramenta Memória e o restante das guias DevTools continuarão mostrando informações relacionadas à página da Web atual.

Compartilhar comentários sobre rastreamentos aprimorados

Rastreamentos aprimorados são um recurso experimental que, com sorte, facilita a colaboração na resolução de problemas de desempenho e memória vendo código não qualificado.

A equipe do Microsoft Edge DevTools recebe todos os comentários que você pode ter sobre rastreamentos aprimorados. Se você já experimentou esse novo recurso, sinta-se à vontade para relatar quaisquer problemas ou ideias sobre ele em nosso repositório GitHub.