Chrome DevTools: JavaScript CPU Profiling no Chrome 58

Basco de Kayce
Kayce Basques

No Chrome 58, que atualmente é Canary, o painel "Timeline" foi renomeado como "Performance", o painel "Profiles" foi renomeado como o painel "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.

Este pequeno guia de migração mostra como gravar um perfil JS no painel "Performance" 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:

  1. Abra o menu principal do DevTools.
  2. Selecione More tools > JavaScript Profiler. O criador de perfil antigo será aberto em um novo painel chamado JavaScript Profiler.

Como registrar um perfil JS

  1. Abra o DevTools.
  2. Clique na guia Performance.

    Painel de desempenho do Chrome DevTools.
    Figura 1. Painel de desempenho.

  3. 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 e interrompe automaticamente 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 que 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.

Mapeamento entre Flame Chart no fluxo de trabalho antigo e no novo.
Figura 2. Mapeamento entre diagramas de chamas no fluxo de trabalho antigo (à esquerda) e no novo (à direita).

A visualização Pesado (de baixo para cima) está disponível na guia De baixo para cima:

Mapeamento entre a visualização de baixo para cima no fluxo de trabalho antigo e o novo.
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:

Mapeamento entre a visualização em árvore no fluxo de trabalho antigo e o novo.
Figura 4. Mapeamento entre a visualização em árvore no fluxo de trabalho antigo (à esquerda) e o novo (à direita).

Dê um ping em @ChromeDevTools no Twitter ou abra um problema do GitHub no nosso repositório de documentos se notarmos recursos ausentes ou se você tiver alguma dúvida sobre este artigo.