O painel JavaScript Profiler será desativado no Chrome 124. A partir de agora, use o painel Desempenho para criar o perfil de desempenho da CPU do Node.js.
Por que estamos descontinuando o JavaScript Profiler? (JS Profiler)
No Chrome 58, a equipe do DevTools planejava suspender o uso do JS Profiler. Há vários motivos para isso:
- Ele não está mais sendo desenvolvido. O JS Profiler não recebe atualizações importantes há vários anos, e a equipe não tem recursos para continuar o desenvolvimento dele.
- 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 da CPU JavaScript no Node.js, faz sentido consolidar tudo em um só lugar para consistência e eficiência.
- O painel "Desempenho" é melhor. Continuamos a aprimorá-la com a adição de novos recursos e melhorias, tornando-a uma ferramenta mais poderosa e fácil de usar para análise de desempenho.
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 desempenho.
- Use as guias De baixo para cima e Árvore de chamadas para entender as relações entre as funções.
Como lidar com a descontinuação?
Desenvolvemos um protótipo e publicamos a solicitação de comentários (RFC, na sigla em inglês) publicamente no GitHub para pedir feedback dos desenvolvedores.
Além disso, entramos em contato ativamente com especialistas de desenvolvedores para testar o protótipo, resolvendo preocupações ou problemas para garantir que o painel Desempenho atenda às principais necessidades de criação de perfis.
Estamos descontinuando gradualmente o JS Profiler em quatro etapas para dar aos desenvolvedores tempo suficiente para ajustar e adotar.
Principais problemas e como corrigi-los
Dentre os feedbacks que recebemos, as preocupações mais urgentes giravam em torno de três questões principais:
- Compatibilidade com o formato de arquivo
.cpuprofile. O JS Profiler usa um formato de arquivo diferente. O painel Desempenho deve ser compatível com ela. - Velocidade de carregamento lenta. 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 ver como eles foram corrigidos.
Velocidade de carregamento lenta
Os desenvolvedores nos disseram que o painel Desempenho demorava muito para carregar arquivos de dados grandes e, às vezes, até travava.
Usamos DevTools para analisar o DevTools (chamamos dele "DevTools-on-DevTools"). Encontramos problemas e fizemos várias otimizações:
Setsubstituído por estruturas de dadosArray.- As estruturas de dados
Mapdesnecessárias foram removidas - As funções recursivas foram refatoradas para iterativas (para loops) a fim de reduzir o uso da pilha de memória.
Ao corrigir esses gargalos, o carregamento de arquivos grandes foi 80% mais rápido. 🎉
Leia mais sobre o que aprendemos nesta postagem do blog: Um painel de desempenho 400% mais rápido com o recurso perf-ception (em inglês).
O seletor de VM JavaScript ausente
O protótipo inicial não tinha o seletor de VM JavaScript. Os desenvolvedores a usam 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. Ela 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 dessa instância específica.
Compatibilidade com o formato de arquivo cpuprofile
Antes, o painel Desempenho só oferecia arquivos de rastreamento, que são arquivos JSON com uma matriz de eventos de rastreamento.
Por outro lado, o JS Profiler aceitava perfis de CPU, que são arquivos com a extensão .cpuprofile que contêm um objeto JSON. Eles 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 deve impedir que os desenvolvedores analisem o cpuprofile existente. Portanto, o painel Desempenho agora oferece suporte a arquivos de rastreamento e perfis de CPU. Importe o arquivo cpuprofile para a guia Performance, e ele será carregado corretamente.
Nos bastidores, detectamos as diferenças na estrutura dos objetos usando uma expressão regular. Se o conteúdo do arquivo começar com {"nodes":[, então é um perfil de CPU. Caso contrário, será um arquivo de rastreamento.
Assim que o tipo de conteúdo é identificado, nós o processamos adequadamente. Em um arquivo de rastreamento, analisamos os eventos e criamos uma linha do tempo. Para um perfil de CPU, analisamos o objeto JSON e criamos um Flame Chart.
Conclusão
Use o painel Desempenho para ter uma experiência de criação de perfil mais simplificada, tanto para sites quanto para perfil de desempenho da CPU em aplicativos Node.js e Deno.
Se você tiver feedback ou sugestões, deixe um comentário neste bug ou entre em contato usando uma das opções a seguir.
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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback pelo site crbug.com.
- Informe um problema do DevTools usando Mais opções
> Ajuda > Relate problemas no DevTools no DevTools. - Envie um tweet em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.