No Chrome 58, atualmente Canary, o painel "Timeline" se chama "Performance", o painel Profiles foi renomeado como "Memory" e o recurso "Record JavaScript CPU Profile" no painel Profiles foi movido para um local mais oculto.
O objetivo a longo prazo é remover o antigo CPU Profiler do JavaScript e fazer com que todos trabalhem com o novo fluxo de trabalho.
Neste guia de migração, mostramos como gravar um perfil JS no painel "Desempenho" e como a IU desse painel é mapeada para o fluxo de trabalho antigo.
Como acessar o antigo CPU Profiler do JavaScript
Se você preferir o fluxo de trabalho antigo "Gravar perfil de CPU JavaScript", que estava disponível no painel "Perfis", ainda poderá acessá-lo da seguinte forma:
- Abra o menu principal do DevTools.
- Selecione More tools > JavaScript Profiler. O criador de perfil antigo será aberto em um novo painel chamado JavaScript Profiler.
Como registrar um perfil JS
- Abra o DevTools.
Clique na guia Performance.
Figura 1. Painel de desempenho.
Para gravar:
- Para criar o perfil de um carregamento de página, clique em Gravar página de carregamento. O DevTools inicia a gravação automaticamente e para quando detecta que a página terminou de carregar.
- Para criar o perfil de uma página em execução, clique em Record, execute as ações para as quais você quer criar o perfil e clique em Stop quando terminar.
Como o fluxo de trabalho antigo é mapeado para o novo
Na visualização Gráfico do fluxo de trabalho antigo, a captura de tela abaixo mostra a posição do gráfico de visão geral do uso da CPU (seta superior) e do Flame Chart (seta inferior) no novo fluxo de trabalho.
Figura 2. Mapeamento entre diagrama de chama no fluxo de trabalho antigo (à esquerda) e no fluxo de trabalho novo (à direita).
A visualização Pesado (de baixo para cima) está disponível na guia De baixo para cima:
Figura 3. Mapeamento entre a visualização de baixo para cima no fluxo de trabalho antigo (à esquerda) e o novo (à direita).
E a visualização Árvore (de cima para baixo) está disponível na guia Árvore de chamadas:
Figura 4. Mapeamento entre a visualização em árvore no fluxo de trabalho antigo (à esquerda) e o novo (à direita).