Exibir nomes de função originais em perfis de desempenho

Se o processo de build compilar e minimizar o código e combiná-lo em um único arquivo, os nomes das funções exibidas em um perfil de desempenho poderão ser difíceis de entender. Mapas de origem mapeiam seu código compilado e minificado para seus arquivos de código-fonte originais. A ferramenta Desempenho pode usar mapas de origem para mapear nomes de funções minificados depois que uma gravação for feita, de volta aos nomes originais encontrados em seu código original.

Para saber mais sobre como o DevTools usa mapas de origem, consulte Mapear o código processado para o código-fonte original para depuração.

Para ver os nomes de função originais no gráfico de chamas na ferramenta Desempenho , use o botão Desminificar ().

O mapeamento de origem é usado no DevTools para manter o código do lado do cliente legível e depurável. Clicando no botão Desminificar na ferramenta Desempenho, você pode usar mapas de origem para criar uma versão não qualificada do perfil de desempenho que você gravou.

Um exemplo de um gráfico de chama de perfil de desempenho, com nomes de função difíceis de ler:

Um exemplo de um gráfico de chama de perfil de desempenho, com alguns nomes de função mais significativos restaurados:

Ao gravar um perfil de desempenho na ferramenta Desempenho , a seção Principal do perfil exibe gráficos de chama detalhados de funções JavaScript chamadas durante a gravação.

Idealmente, nesta exibição do gráfico de chamas, você deseja ver os nomes de função significativos mostrados no código-fonte original. No entanto, se o código de produção for compilado, minificado ou empacotado, a ferramenta Desempenho exibirá inicialmente os nomes de função extraídos do código de produção transformado. Esses nomes de função de produção podem ser obscuros e podem não ser facilmente mapeados para nomes de função em seu código-fonte original.

Para desminificar um perfil de desempenho, para que alguns nomes de função mais significativos sejam mostrados além dos identificadores minificados, siga as etapas abaixo.

Etapa 1 – Configurar mapas de origem

Hospede seus mapas de origem lado a lado com o código de produção. Ao desminificar, a ferramenta Desempenho espera encontrar seus mapas de origem junto com o código de produção.

Para obter detalhes, consulte Mapear o código processado para o código-fonte original para depuração.

Etapa 2 – Registrar um perfil de desempenho

1. Na ferramenta Desempenho , clique no botão Gravar , para registrar um perfil de desempenho para a página que você deseja analisar. Para obter detalhes, confira Desempenho de tempo de execução de registro.

   

   Um perfil de desempenho é registrado na ferramenta Desempenho .

2. Na ferramenta Desempenho, clique na área main (o gráfico de chamas) e use a roda do mouse para ampliar. Clique e arraste para a esquerda e para a direita. Veja os nomes das funções no gráfico de chamas.

   O gráfico de chamas na ferramenta Desempenho mostra nomes de função minificados, como XI, Gi, d, o, an, c, co e um do código de produção:

   

Etapa 3 – Desminificar o código

1. Clique no botão Desminificar ():

   

   Em DevTools, um pop-up aparece brevemente, lendo: Status: criando um arquivo não gerenciado. Em seguida, a caixa de diálogo Salvar como é aberta. O nome do arquivo padrão é um padrão começando com data e hora como yymmddThhmmss, como: Profile-20220307T164948-unminified.json. O diretório padrão é o diretório Downloads .

2. Selecione um nome e diretório de arquivo e clique no botão Salvar .

   A ferramenta Performance cria uma nova versão do perfil de desempenho gravado, com alguns nomes de função do gráfico de chamas substituídos por nomes de função mais significativos usando seus mapas de origem. Alguns dos nomes de produção minificados ainda podem aparecer, pois os mapas de origem nem sempre fornecem as informações necessárias para a ferramenta Performance mapear todos os nomes de funções.

Etapa 4 – Carregar o perfil não gerenciado

1. Na ferramenta Desempenho, clique no botão Ícone Carregar (). Ou clique com o botão direito do mouse em uma área em branco da ferramenta Desempenho e selecione Carregar perfil.

   

2. Na caixa de diálogo Abrir , selecione o arquivo de perfil .json de desempenho não qualificado que você acabou de baixar. Se necessário, para obter detalhes, consulte Carregar uma gravação na referência de recursos de desempenho e, em seguida, continuar abaixo.

   Alguns nomes de função agora não são qualificados. O gráfico de chama não qualificado na ferramenta Performance agora mostra essas funções rotuladas com nomes mais significativos retirados de seus mapas de origem, como useObserver (d), useQueuedForceUpdateBlock (o), trackDerivedFunction (an), initializeIconColorMap (c), getExtraToolControls (co)e isToggleEnabled (a).

   

Confira também

• Introdução à ferramenta Desempenho – uma introdução à análise do desempenho do runtime no DevTools.
• Referência de recursos de desempenho: uma referência para muitos dos recursos oferecidos na ferramenta Performance.