Chrome DevTools: JavaScript CPU Profiling no Chrome 58

Kayce Basques
Kayce Basques
X GitHub Falha

No Chrome 58, que atualmente está na versão Canary, o painel "Linha do tempo" foi renomeado como painel "Desempenho", o painel "Perfis" foi renomeado como o painel "Memória" e o recurso "Gravar perfil de CPU do JavaScript" no painel "Perfis" foi movido para um local mais oculto.

O objetivo a longo prazo é remover o antigo JavaScript CPU Profiler 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 interface dele é mapeada para o fluxo de trabalho antigo que você já conhece.

Como acessar o antigo criador de perfil de CPU do JavaScript

Se preferir o fluxo de trabalho "Record JavaScript CPU CPU Profile" antigo, que estava disponível no painel "Perfis", ainda é possível acessá-lo da seguinte maneira:

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

Como gravar um perfil JS

  1. Abra o DevTools.

  2. Clique na guia Desempenho.

    Painel de desempenho do Chrome DevTools.
    Figura 1. O painel "Desempenho".

  3. Faça o registro de uma das seguintes maneiras:

    • Para criar o perfil de um carregamento de página, clique em Gravar carregamento de página. O DevTools inicia a gravação automaticamente e para 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 que você quer criar 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 dos gráficos de visão geral do uso da CPU (seta superior) e do Flame Chart (seta inferior) no novo fluxo de trabalho.

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

A visualização Strong (Bottom Up) está disponível na guia Bottom-Up:

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 Tree (Top Down) está disponível na guia Call Tree:

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 algum recurso estiver faltando ou se você tiver dúvidas sobre este artigo.