Apresentar nomes de funções originais em perfis de desempenho

Se o processo de compilação compilar e minimizar o código e o combinar num único ficheiro, os nomes das funções apresentadas num perfil de desempenho poderão ser difíceis de compreender. Os mapas de origem mapeiam o código compilado e minificado para os seus ficheiros de código fonte originais. A ferramenta Desempenho pode utilizar mapas de origem para mapear nomes de funções minificados após a gravação ser efetuada, de volta aos nomes originais encontrados no código original.

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

Para ver os nomes das funções originais no gráfico de chama na ferramenta Desempenho, utilize o botão Desminificar (

O mapeamento de origem é utilizado no DevTools para manter o código do lado do cliente legível e depurável. Ao clicar no botão Desminificar na ferramenta Desempenho, pode utilizar os mapas de origem para criar uma versão não modificada do perfil de desempenho que gravou.

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

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

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

Idealmente, nesta vista de gráfico de chama, quer ver os nomes de funções relevantes que são apresentados no código fonte original. No entanto, se o código de produção for compilado, minimizado ou agrupado, a ferramenta Desempenho apresenta inicialmente os nomes das funções que são extraídos do código de produção transformado. Estes nomes de funções de produção podem ser obscuros e podem não ser facilmente mapeados para nomes de funções no código fonte original.

Para desminificar um perfil de desempenho, para que sejam apresentados alguns nomes de funções mais significativos para além dos identificadores minificados, siga os passos abaixo.

Passo 1 – Configurar mapas de origem

Aloje os mapas de origem lado a lado com o código de produção. Ao desminificar, a ferramenta Desempenho espera encontrar os mapas de origem juntamente 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.

Passo 2 – Gravar um perfil de desempenho

1. Na ferramenta Desempenho , clique no botão Gravar para gravar um perfil de desempenho para a página que pretende analisar. Para obter detalhes, veja Record runtime performance in Performance features reference (Registar o desempenho do runtime na referência de Funcionalidades de desempenho).

   

   É registado um perfil de desempenho na ferramenta Desempenho .

2. Na ferramenta Desempenho , clique na área principal (o gráfico de chama) e utilize a roda do rato para ampliar. Clique e arraste para a esquerda e para a direita. Observe os nomes das funções no gráfico de chama.

   O gráfico de chama na ferramenta Desempenho mostra nomes de funções minificadas, tais como XI, Gi, d, o, an, c, co e a do código de produção:

   

Passo 3 – Desminificar o código

1. Clique no botão Desminificar ():

   

   Em DevTools, é apresentado um pop-up brevemente, onde se lê: Estado: criar um ficheiro não filtrado. Em seguida, é aberta a caixa de diálogo Guardar Como . O nome de ficheiro predefinido é um padrão que começa com data e hora, como yymmddThhmmss, como: Profile-20220307T164948-unminified.json. O diretório predefinido é o diretório Transferências .

2. Selecione um nome de ficheiro e diretório e, em seguida, clique no botão Guardar .

   A ferramenta Desempenho cria uma nova versão do perfil de desempenho registado, com alguns nomes de funções do gráfico de chama substituídos por nomes de funções mais significativos utilizando os mapas de origem. Alguns dos nomes de produção minimizados ainda podem aparecer, uma vez que os mapas de origem nem sempre fornecem as informações necessárias para que a Ferramenta de desempenho mapeie todos os nomes de funções.

Passo 4 – Carregar o perfil não administrativo

1. Na ferramenta Desempenho , clique no botão Carregar perfil (). Em alternativa, clique com o botão direito do rato numa área em branco da ferramenta Desempenho e, em seguida, selecione Carregar perfil.

   

2. Na caixa de diálogo Abrir , selecione o ficheiro de perfil .json de desempenho não administrativo que acabou de transferir. Se necessário, para obter detalhes, consulte Carregar uma gravação na referência de Funcionalidades de desempenho e, em seguida, continue abaixo.

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

   

Confira também

• Analisar o desempenho do runtime (tutorial) – uma introdução à análise do desempenho do runtime no DevTools.
• Referência de funcionalidades de desempenho – uma referência para muitas das funcionalidades oferecidas na ferramenta Desempenho.