Adeus, JS Profiler, criação de perfil de CPU com o painel Performance

Jecelyn Yeen

Nancy Li

Observação:quer ajudar a melhorar o DevTools? Faça sua inscrição nas pesquisas de usuário do Google.

O painel JavaScript Profiler será desativado no Chrome 124. A partir de agora, use o painel Desempenho para criar o perfil do desempenho da CPU do Node.js.

Por que estamos descontinuando o JavaScript Profiler? (JS Profiler)

A partir do Chrome 58, a equipe do DevTools planejava suspender o uso do JS Profiler. Há vários motivos para isso:

• Ele não está mais em desenvolvimento ativo. O JS Profiler não recebe atualizações importantes há vários anos, e a equipe não tem os recursos para continuar a desenvolvê-lo.
• Uma experiência de criação de perfil mais simplificada. O painel Desempenho já é usado para todos os tipos de análise de desempenho e, com a capacidade de criar o perfil do desempenho de CPU JavaScript em Node.js, faz sentido consolidar tudo em um só lugar para consistência e eficiência.
• O painel "Performance" é melhor. Continuamos aprimorando esse recurso com a adição de novos recursos e melhorias, que torna a análise de desempenho uma ferramenta mais eficiente e fácil de usar.

O que fazer depois da descontinuação?

Para saber mais sobre como criar o perfil de desempenho da CPU JavaScript, consulte Criar perfil de desempenho do Node.js.

Veja algumas dicas para usar o painel Desempenho:

• Use o flame Chart para identificar gargalos de performance.

• Use as guias Bottom-up e Call tree para entender as relações entre as funções.

Como lidamos com a descontinuação?

Desenvolvemos um protótipo e publicamos o Request for Comments (RFC) (link em inglês) publicamente no GitHub para pedir o feedback dos desenvolvedores.

Além disso, entramos em contato com especialistas dos desenvolvedores para testar o protótipo, abordando quaisquer preocupações ou problemas para garantir que o painel Desempenho atenda às principais necessidades de criação de perfil.

Estamos desativando gradualmente o JS Profiler em quatro etapas para dar aos desenvolvedores tempo suficiente para se ajustar e adotar.

Principais problemas e como os corrigimos

Entre os feedbacks que recebemos, as preocupações mais urgentes estavam centradas em três questões principais:

• Suporte ao formato de arquivo .cpuprofile. O JS Profiler usa um formato de arquivo diferente. O painel Desempenho deve ser compatível.
• Carregamento lento. A velocidade de carregamento do painel parecia lenta, interferindo no processo de criação de perfil.
• O seletor de VM JavaScript está ausente. A ausência de um seletor de instância de VM JavaScript limita os recursos de criação de perfil em determinados cenários.

Vamos analisar cada um desses problemas e saber como eles foram corrigidos.

Carregamento lento

Os desenvolvedores disseram que o painel Desempenho demorava muito para carregar arquivos de dados grandes e, às vezes, ele até falhava.

Usamos o DevTools para analisar o DevTools (chamado de "DevTools-on-DevTools"). Encontramos problemas e fizemos várias otimizações:

• Set foi substituído por estruturas de dados de Array.
• As estruturas de dados Map desnecessárias foram removidas
• As funções recursivas foram refatoradas para iterativas (loops) a fim de reduzir o uso da pilha de memória.

Ao corrigir esses gargalos, aumentamos em 80% o carregamento de arquivos grandes. 🎉

Leia mais sobre o que aprendemos nesta postagem do blog: Um painel de desempenho 400% mais rápido com a performance (em inglês).

O seletor de VM JavaScript ausente

O protótipo inicial não tinha o seletor de VM JavaScript. Os desenvolvedores usam isso para detalhar e se concentrar na análise de uma instância de VM específica.

Adicionamos um seletor de VM JavaScript ao painel Desempenho. Ele mostra uma lista suspensa de todas as instâncias de VM JavaScript disponíveis. Quando você seleciona uma instância, o painel Desempenho carrega o perfil de CPU para essa instância específica.

Suporte ao formato de arquivo cpuprofile

Antes, o painel Desempenho só era compatível com arquivos de rastreamento, que são arquivos JSON com uma matriz de eventos de rastreamento.

Por outro lado, o JS Profiler era compatível com perfis de CPU, que são arquivos com a extensão .cpuprofile que contêm um objeto JSON. Elas têm esta aparência:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

O novo fluxo de trabalho não vai impedir que os desenvolvedores analisem o cpuprofile atual. O painel Performance agora é compatível com arquivos de rastreamento e perfis de CPU. Importe o arquivo cpuprofile para Performance. Ele será carregado corretamente.

Em segundo plano, detectamos as diferenças na estrutura dos objetos usando uma expressão regular. Se o conteúdo do arquivo começar com {"nodes":[, ele é um perfil de CPU. Caso contrário, será um arquivo de rastreamento.

Assim que o tipo de conteúdo é identificado, ele é processado de forma adequada. Em um arquivo de rastreamento, analisamos os eventos e criamos uma linha do tempo. Para o perfil de CPU, analisamos o objeto JSON e criamos um Flame Chart.

Conclusão

Use o painel Performance para ter uma experiência de criação de perfil mais simplificada, tanto para sites quanto para perfis do desempenho da CPU em aplicativos Node.js e Deno.

Se você tiver feedback ou sugestões, adicione um comentário a este bug ou use uma das opções a seguir para entrar em contato.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

• Envie uma sugestão ou feedback em crbug.com.
• Informe um problema do DevTools em Mais opções     > Ajuda > Informar problemas no DevTools.
• Envie um tweet em @ChromeDevTools.
• Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.