Referência dos recursos de desempenho

Kayce Basques

Sofia Emelianova

Esta página é um guia abrangente sobre os recursos do Chrome DevTools relacionados à análise de desempenho.

Consulte Analisar o desempenho de execução para conferir um tutorial guiado sobre como analisar a performance de uma página usando o Chrome DevTools.

Gravar a performance

É possível gravar o desempenho de execução ou de carregamento.

Gravar a performance do ambiente de execução

Grave o desempenho de execução quando quiser analisar a performance de uma página enquanto ela está sendo executada, em vez de carregar.

1. Acesse a página que você quer analisar.
2. Clique na guia Performance no DevTools.

3. Clique em Gravar .

   

4. Interaja com a página. O DevTools registra toda a atividade da página que ocorre como resultado das suas interações.

5. Clique em Gravar novamente ou em Interromper para interromper a gravação.

Gravar o desempenho de carregamento

Grave o desempenho de carregamento quando quiser analisar a performance de uma página enquanto ela está sendo carregada, em vez de executada.

1. Acesse a página que você quer analisar.
2. Abra o painel Performance do DevTools.

3. Clique em Iniciar a criação de perfil e atualizar a página . As Ferramentas do desenvolvedor primeiro navegam para about:blank para limpar as capturas de tela e os rastros restantes. Em seguida, o DevTools registra as métricas de desempenho enquanto a página é recarregada e, em seguida, interrompe automaticamente a gravação alguns segundos após o término do carregamento.

   

O DevTools aproxima automaticamente a parte da gravação em que ocorreu a maior parte da atividade.

Neste exemplo, o painel Performance mostra a atividade durante o carregamento da página.

Fazer capturas de tela durante a gravação

Marque a caixa de seleção Screenshots para capturar uma captura de tela de cada frame durante a gravação.

Consulte Conferir uma captura de tela para saber como interagir com capturas de tela.

Forçar a coleta de lixo durante a gravação

Enquanto você estiver gravando uma página, clique em Coletar lixo mop para forçar a coleta de lixo.

Mostrar configurações de gravação

Clique em Configurações de captura para exibir mais configurações relacionadas à forma como as DevTools capturam gravações de performance.

Desativar exemplos JavaScript

Por padrão, a faixa Main de uma gravação mostra pilhas de chamadas detalhadas de funções JavaScript que foram chamadas durante a gravação. Para desativar essas pilhas de chamadas:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Marque a caixa de seleção Desativar exemplos de JavaScript.
3. Faça uma gravação da página.

As capturas de tela a seguir mostram a diferença entre desativar e ativar exemplos de JavaScript. A faixa Principal da gravação é muito mais curta quando a amostragem está desativada, porque ela omite todas as pilhas de chamadas do JavaScript.

Este exemplo mostra uma gravação com exemplos de JS desativados.

Este exemplo mostra uma gravação com exemplos de JS ativados.

Limitar a rede durante a gravação

Para limitar a rede durante a gravação:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Defina Rede como o nível de limitação escolhido.

Limitar a CPU durante a gravação

Para limitar a CPU durante a gravação:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Defina a CPU para o nível de limitação escolhido.

O limite é relativo às capacidades do seu computador. Por exemplo, a opção 2x slowdown faz com que a CPU opere duas vezes mais devagar do que o normal. O DevTools não pode simular as CPUs de dispositivos móveis, porque a arquitetura deles é muito diferente da de computadores e laptops.

Ativar estatísticas do seletor de CSS

Para conferir as estatísticas dos seletores de regras de CSS durante eventos de Recalculate Style de longa duração:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Marque a caixa de seleção Ativar estatísticas do seletor de CSS.

Para mais detalhes, consulte como analisar a performance do seletor de CSS durante os eventos de recalcular estilo.

Ativar a instrumentação de pintura avançada

Para conferir a instrumentação detalhada da pintura:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Marque a caixa de seleção Ativar instrumentação de exibição avançada.

Para saber como interagir com as informações de pintura, consulte Mostrar camadas e Mostrar o Profiler de pintura.

Emular a simultaneidade de hardware

Para testar o desempenho do aplicativo com diferentes números de núcleos de processador, configure o valor informado pela propriedade navigator.hardwareConcurrency. Alguns aplicativos usam essa propriedade para controlar o grau de paralelismo, por exemplo, para controlar o tamanho do pool de pthreads do Emscripten.

Para emular a simultaneidade de hardware:

1. Abra o menu Configurações de captura. Consulte Mostrar as configurações de gravação.
2. Marque Concorrência de hardware e defina o número de núcleos na caixa de entrada.

O DevTools mostra um ícone de aviso ao lado da guia Performance para lembrar que a emulação de simultaneidade de hardware está ativada.

Para reverter para o valor padrão de 10, clique no botão Reverter.

Salvar uma gravação

Para salvar uma gravação, clique com o botão direito do mouse e selecione Salvar perfil.

Carregar uma gravação

Para carregar uma gravação, clique com o botão direito do mouse e selecione Carregar perfil.

Limpar a gravação anterior

Depois de fazer uma gravação, pressione Limpar gravação para limpar a gravação do painel Performance.

Analisar uma gravação de performance

Depois de registrar a performance de execução ou registrar a performance de carregamento, o painel Performance oferece muitos dados para analisar a performance do que acabou de acontecer.

Navegar pela gravação

Para inspecionar a gravação de performance, selecione uma parte da gravação, role uma tabela de chamas longa, aumente e diminua o zoom e use o caminho de navegação para pular entre os níveis de zoom.

Selecionar uma parte da gravação

Na barra de ações do painel Performance e na parte de cima da gravação, você encontra a seção Visão geral da linha do tempo com os gráficos CPU e NET.

Para selecionar uma parte de uma gravação, clique, mantenha pressionado e arraste para a esquerda ou direita na Visão geral da linha do tempo.

Para selecionar uma parte usando o teclado:

1. Foque a faixa Principal ou qualquer uma das faixas vizinhas.
2. Use as teclas W, A, S, D para aumentar o zoom, mover para a esquerda, diminuir o zoom e mover para a direita, respectivamente.

Para selecionar uma parte usando um trackpad:

1. Passe o cursor sobre a seção Visão geral da linha do tempo ou sobre qualquer uma das faixas (Principal e as faixas vizinhas).
2. Usando dois dedos, deslize para cima para diminuir o zoom, deslize para a esquerda para mover para a esquerda, deslize para baixo para aumentar o zoom e deslize para a direita para mover para a direita.

Criar trilhas de navegação e pular entre níveis de zoom

A Visão geral da linha do tempo permite criar várias navegações aninhadas em sucessão, aumentando os níveis de zoom e pulando livremente entre eles.

Para criar e usar trilhas de navegação:

1. Na Visão geral da linha do tempo, selecione uma parte da gravação.
2. Passe o cursor sobre a seleção e clique no botão N ms zoom_in. A seleção é expandida para preencher a Visão geral da linha do tempo. Uma cadeia de trilhas começa a ser criada na parte de cima da Visão geral da linha do tempo.
3. Repita as duas etapas anteriores para criar outro breadcrumb aninhado. É possível continuar aninhando os indicadores de caminho para o usuário, desde que o intervalo de seleção seja maior que 5 milissegundos.
4. Para ir para um nível de zoom escolhido, clique no caminho de navegação correspondente na cadeia na parte de cima da Visão geral da linha do tempo.

Para remover as navegações estruturais filhas de uma navegação estrutural, clique com o botão direito do mouse na navegação estrutural mãe e selecione Remover navegações estruturais filhas.

Rolar um gráfico de chama longo

Para rolar um gráfico de chamas longo na faixa Principal ou em qualquer uma das faixas vizinhas, clique e mantenha pressionado, depois arraste em qualquer direção até encontrar o que você está procurando.

Atividades de pesquisa

Você pode pesquisar as atividades na faixa Principal e as solicitações na faixa Rede.

Para abrir uma caixa de pesquisa na parte de baixo do painel Performance, pressione:

• macOS: Command+F
• Windows, Linux: Control+F

Este exemplo mostra uma expressão regular na caixa de pesquisa na parte de baixo que encontra qualquer atividade que comece com E.

Para alternar entre as atividades que correspondem à sua consulta:

• Clique nos botões expand_less Anterior ou expand_more Próxima.
• Pressione Shift+Enter para selecionar a anterior ou Enter para selecionar a próxima.

O painel Performance mostra uma dica sobre a atividade selecionada na caixa de pesquisa.

Para modificar as configurações de consulta:

• Clique em match_case Match case para que a consulta diferencie maiúsculas de minúsculas.
• Clique em regular_expression Expressão regular para usar uma expressão regular na consulta.

Para ocultar a caixa de pesquisa, clique em Cancelar.

Mudar a ordem das faixas e ocultá-las

Para organizar o rastro de performance, você pode mudar a ordem das faixas e ocultar as irrelevantes no modo de configuração.

Para mover e ocultar faixas:

1. Para entrar no modo de configuração, clique com o botão direito do mouse em um nome de faixa e selecione Configurar faixas.
2. Clique em seta_para_cima para cima ou seta_para_baixo para baixo para mover uma faixa para cima ou para baixo. Clique em visibility_off para ocultá-la.
3. Quando terminar, clique em Concluir a configuração de faixas na parte de baixo para sair do modo de configuração.

Assista ao vídeo para conferir este fluxo de trabalho em ação.

O painel Performance salva a configuração da faixa para novos rastros, mas não nas próximas sessões do DevTools.

Conferir a atividade da linha de execução principal

Use a faixa Principal para conferir a atividade que ocorreu na linha de execução principal da página.

Clique em um evento para conferir mais informações na guia Resumo. O painel Performance destaca o evento selecionado em azul.

Este exemplo mostra mais informações sobre o evento de chamada de função get na guia Resumo.

Ler o gráfico de chama

O painel Performance representa a atividade da linha de execução principal em um diagrama de chamas. O eixo x representa a gravação ao longo do tempo. O eixo y representa a pilha de chamadas. Os eventos na parte de cima causam os eventos abaixo.

Este exemplo mostra um gráfico de chamas na faixa Principal. Um evento click causou uma chamada de função anônima. Essa função, por sua vez, chamou onEndpointClick_, que chamou handleClick_ e assim por diante.

O painel Performance atribui cores aleatórias aos scripts para dividir o gráfico de chamas e torná-lo mais legível. No exemplo anterior, as chamadas de função de um script são azuis-claros. As chamadas de outro script são rosa claro. O amarelo mais escuro representa a atividade de script, e o evento roxo representa a atividade de renderização. Esses eventos amarelos e roxos mais escuros são consistentes em todas as gravações.

Tarefas longas também são destacadas com um triângulo vermelho e com a parte acima de 50 milissegundos sombreada em vermelho:

Neste exemplo, a tarefa levou mais de 400 milissegundos, então a parte que representa os últimos 350 milissegundos está sombreada em vermelho, enquanto os 50 milissegundos iniciais não estão.

Além disso, a faixa Principal mostra informações sobre os perfis de CPU iniciados e interrompidos com as funções de console profile() e profileEnd().

Para ocultar o gráfico de chamas detalhado das chamadas JavaScript, consulte Desativar exemplos de JavaScript. Quando as amostras de JS estão desativadas, você só tem acesso aos eventos de alto nível, como Event (click) e Function Call.

Rastrear iniciadores de eventos

A faixa Principal pode mostrar setas que conectam os seguintes iniciadores e os eventos que eles causaram:

• Invalidação de estilo ou layout: Recalcular estilos ou Layout
• Solicitar frame de animação -> Frame de animação disparado
• Solicitar callback inativo -> Disparar callback inativo
• Install Timer -> Timer Fired
• Criar WebSocket Enviar e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre e selecione um iniciador ou o evento causado por ele no gráfico de chamas.

Quando selecionada, a guia "Resumo" mostra links Iniciador de para iniciadores e Iniciado por para os eventos que eles causaram. Clique neles para alternar entre os eventos correspondentes.

Ocultar funções e filhos delas no gráfico de chamas

Para limpar o gráfico de chamas na linha de execução Main, você pode ocultar as funções selecionadas ou as crianças delas:

1. Na faixa Principal, clique com o botão direito do mouse em uma função e escolha uma das seguintes opções ou pressione o atalho correspondente:

   • Ocultar função (H)
   • Ocultar filhos (C)
   • Ocultar filhos recorrentes (R)
   • Redefinir filhos (U)
   • Redefinir rastro (T)
   • Adicionar script para ignorar lista (I)

   

   Um botão de menu suspenso arrow_drop_down aparece ao lado do nome da função com filhos ocultos.

2. Para conferir o número de filhos ocultos, passe o cursor sobre o botão de menu suspenso arrow_drop_down.

   

3. Para redefinir uma função com filhos ocultos ou o gráfico de chamas inteiro, selecione a função e pressione U ou clique com o botão direito do mouse em qualquer função e selecione Redefinir rastreamento.

Ignorar scripts no gráfico de chamas

Para adicionar um script à lista de ignorados, clique com o botão direito do mouse em um script no gráfico e selecione Adicionar script à lista de ignorados.

O gráfico reduz os scripts ignorados, marca-os como Na lista de ignorados e os adiciona às regras de Exceção personalizada em configurações Configurações > Lista de ignorados. Os scripts ignorados são salvos até que você os remova do rastro ou das Regras de exclusão personalizadas.

Conferir atividades em uma tabela

Depois de gravar uma página, você não precisa depender apenas da faixa Principal para analisar as atividades. As Ferramentas do desenvolvedor também oferecem três visualizações tabulares para analisar atividades. Cada visualização oferece uma perspectiva diferente sobre as atividades:

• Quando você quiser conferir as atividades raiz que causam mais trabalho, use a guia Call Tree.
• Para conferir as atividades em que mais tempo foi gasto diretamente, use a guia Bottom-Up.
• Para conferir as atividades na ordem em que ocorreram durante a gravação, use a guia Log de eventos.

Para ajudar você a encontrar o que procura mais rapidamente, as três guias têm botões de filtragem avançada ao lado da barra Filtrar:

• match_case Match case.
• regular_expression Expressão regular.
• match_word Corresponder a palavra inteira.

Cada visualização tabular no painel Performance mostra links para atividades, como chamadas de função. Para ajudar na depuração, o DevTools encontra as declarações de função correspondentes nos arquivos de origem. Além disso, se os mapas de origem apropriados estiverem presentes e ativados, o DevTools vai encontrar os arquivos originais automaticamente.

Clique em um link para abrir um arquivo de origem no painel Origens.

Observação:as três próximas seções se referem à mesma demonstração. Você pode executar a demonstração em Demonstração de guias de atividade e conferir a origem em GoogleChrome/devtools-samples/perf/activitytabs.html.

Atividades raiz

Confira uma explicação do conceito de atividades raiz mencionado nas guias Árvore de chamadas, De baixo para cima e Registro de eventos.

As atividades raiz são aquelas que fazem o navegador trabalhar. Por exemplo, quando você clica em uma página, o navegador dispara uma atividade Event como a atividade raiz. Esse Event pode fazer com que um gerenciador seja executado.

No gráfico de chama da faixa Principal, as atividades raiz estão na parte de cima do gráfico. Nas guias Call Tree e Event Log, as atividades raiz são os itens de nível superior.

Consulte a guia A árvore de chamadas para conferir um exemplo de atividades raiz.

Guia "Árvore de chamadas"

Use a guia Call Tree para conferir quais atividades raiz causam mais trabalho.

A guia Call Tree mostra apenas as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como fazer isso.

Neste exemplo, o nível superior de itens na coluna Atividade, como Event, Paint e Composite Layers são atividades raiz. O aninhamento representa a pilha de chamadas. Neste exemplo, o Event causou o Function Call, que causou o button.addEventListener, que causou o b e assim por diante.

Tempo próprio representa o tempo gasto diretamente nessa atividade. Tempo total representa o tempo gasto nessa atividade ou em qualquer uma das atividades filhas.

Clique em Tempo de autoavaliação, Tempo total ou Atividade para classificar a tabela por essa coluna.

Use a caixa Filtro para filtrar eventos por nome de atividade.

Por padrão, o menu Agrupamento é definido como Sem agrupamento. Use o menu Agrupamento para classificar a tabela de atividades com base em vários critérios.

Clique em Show Heaviest Stack para revelar outra tabela à direita da tabela Atividade. Clique em uma atividade para preencher a tabela Heaviest Stack. A tabela Heaviest Stack mostra quais filhos da atividade selecionada demoraram mais para ser executados.

Guia "De baixo para cima"

Use a guia Bottom-Up para conferir quais atividades consumiram mais tempo no total.

A guia Bottom-Up mostra apenas as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como fazer isso.

No gráfico de chama da Pista principal deste exemplo, é possível ver que quase todo o tempo foi gasto na execução das três chamadas para wait(). Assim, a atividade principal na guia Bottom-Up é wait. No gráfico de chama, a cor amarela abaixo das chamadas para wait são, na verdade, milhares de chamadas Minor GC. Assim, você pode conferir que na guia Bottom-Up, a próxima atividade mais cara é Minor GC.

A coluna Tempo próprio representa o tempo agregado gasto diretamente nessa atividade em todas as ocorrências.

A coluna Tempo total representa o tempo agregado gasto nessa atividade ou em qualquer uma das atividades filhas.

Guia "Event Log"

Use a guia Registro de eventos para conferir as atividades na ordem em que ocorreram durante a gravação.

A guia Registro de eventos mostra apenas as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como fazer isso.

A coluna Start Time representa o ponto em que a atividade começou, em relação ao início da gravação. O horário de início de 1573.0 ms para o item selecionado neste exemplo significa que a atividade começou 1573 ms após o início da gravação.

A coluna Tempo próprio representa o tempo gasto diretamente nessa atividade.

As colunas Total de tempo representam o tempo gasto diretamente nessa atividade ou em qualquer uma das atividades filhas.

Clique em Início, Tempo ou Tempo total para classificar a tabela por essa coluna.

Use a caixa Filtrar para filtrar atividades por nome.

Use o menu Duração para filtrar atividades que levaram menos de 1 ms ou 15 ms. Por padrão, o menu Duração é definido como Todas, o que significa que todas as atividades são mostradas.

Desative as caixas de seleção Carregamento, Script, Renderização ou Pintura para filtrar todas as atividades dessas categorias.

Conferir os horários

Na faixa Tempos, confira marcadores importantes, como:

• First Paint (FP)
• First Contentful Paint (FCP)
• Maior exibição de conteúdo (LCP)
• Evento DOMContentLoaded (DCL)
• Evento de carregamento (L)
• Suas chamadas performance.mark() personalizadas. Uma marca individual com dica de ferramenta é mostrada abaixo em 813,44 ms, com a etiqueta Início da execução do JavaScript.
• Suas chamadas performance.measure() personalizadas. Uma extensão amarela é mostrada abaixo, com a etiqueta Interação lenta.

Selecione um marcador para conferir mais detalhes na guia Resumo, incluindo o carimbo de data/hora, o tempo total, o tempo próprio e o objeto detail. Para chamadas performance.mark() e performance.measure(), a guia também mostra rastros de pilha.

Conferir interações

Confira as interações do usuário na faixa Interações para detectar possíveis problemas de responsividade.

Para conferir as interações:

1. Abra o DevTools, por exemplo, nesta página de demonstração.
2. Abra o painel Performance e inicie uma gravação.
3. Clique em um elemento (café) e interrompa a gravação.
4. Encontre a faixa Interações na linha do tempo.

Neste exemplo, a faixa Interações mostra a interação Ponteiro. As interações têm bigodes que indicam atrasos de entrada e apresentação nos limites de tempo de processamento. Passe o cursor sobre a interação para conferir uma dica com atraso de entrada, tempo de processamento e atraso de apresentação.

A faixa Interações também mostra avisos de Interaction to Next Paint (INP) para interações com mais de 200 milissegundos na guia Resumo e em uma dica de ferramenta ao passar o cursor:

A faixa Interações marca as interações acima de 200 milissegundos com um triângulo vermelho no canto superior direito.

Conferir a atividade da GPU

Confira a atividade da GPU na seção GPU.

Conferir a atividade do raster

Confira a atividade de raster na seção Pool de linhas de execução.

Analisar quadros por segundo (QPS)

O DevTools oferece várias maneiras de analisar frames por segundo:

• Use a seção Frames para saber quanto tempo um frame específico levou.
• Use o medidor de QPS para uma estimativa em tempo real de QPS à medida que a página é executada. Consulte Conferir frames por segundo em tempo real com o medidor de QPS.

Seção "Frames"

A seção Frames informa exatamente quanto tempo um frame específico levou.

Passe o cursor sobre um frame para ver uma dica com mais informações sobre ele.

Este exemplo mostra uma dica quando você passa o cursor sobre um frame.

A seção Frames pode mostrar quatro tipos de frames:

1. Frame inativo (branco). Sem alterações.
2. Frame (verde). Renderizado como esperado e a tempo.
3. Frame mostrado parcialmente (amarelo com um padrão de linhas pontilhadas largas). O Chrome fez o possível para renderizar pelo menos algumas atualizações visuais a tempo. Por exemplo, se o trabalho da linha de execução principal do processo de renderizador (animação de tela) estiver atrasado, mas a linha de execução do compositor (rolagem) estiver dentro do prazo.
4. Frame ignorado (vermelho com um padrão denso de linhas sólidas). O Chrome não consegue renderizar o frame em um tempo razoável.

Este exemplo mostra uma dica quando você passa o cursor sobre um frame parcialmente apresentado.

Clique em um frame para conferir mais informações sobre ele na guia Resumo. O DevTools delineia o frame selecionado em azul.

Conferir solicitações de rede

Abra a seção Rede para conferir uma hierarquia de solicitações de rede que ocorreram durante a gravação de performance.

Ao lado do nome da faixa Network, há uma legenda com tipos de solicitação codificados por cores.

As solicitações de renderização bloqueadas são marcadas com um triângulo vermelho no canto superior direito.

Passe o cursor sobre uma solicitação para ver uma dica com:

• O URL da solicitação e o tempo total que levou para ser executada.
• Prioridade ou uma mudança de prioridade, por exemplo, Medium -> High.
• Indica se a solicitação é Render blocking ou não.
• Um detalhamento dos tempos de solicitação, descrito mais adiante.

Quando você clica em uma solicitação, a faixa Rede desenha uma seta do iniciador para a solicitação.

Além disso, o painel Performance mostra a guia Resumo com mais informações sobre a solicitação, incluindo, mas não se limitando a, os campos Prioridade inicial e Prioridade (final). Se os valores forem diferentes, a prioridade de busca da solicitação terá mudado durante a gravação. Para mais informações, consulte Como otimizar o carregamento de recursos com a API Fetch Priority.

A guia Resumo também mostra um detalhamento dos tempos da solicitação.

A solicitação de www.google.com é representada por uma linha à esquerda (|–), uma barra no meio com uma parte escura e uma parte clara e uma linha à direita (–|).

Você pode encontrar outro detalhamento de tempos na guia Rede. Clique com o botão direito do mouse na solicitação na faixa Rede ou no URL dela na guia Resumo e clique em Revelar no painel de rede. O DevTools leva você ao painel Network e seleciona a solicitação correspondente. Abra a guia Tempo.

Confira como esses dois detalhamentos são mapeados:

• A linha à esquerda (|–) inclui tudo até o grupo de eventos Connection start. Em outras palavras, é tudo o que está antes de Request Sent.
• A parte clara da barra é Request sent e Waiting for server response.
• A parte escura da barra é Content download.
• A linha à direita (–|) é o tempo gasto esperando pela linha de execução principal. A guia Rede > Temporização não mostra isso.

Conferir métricas de memória

Marque a caixa de seleção Memória para conferir as métricas de memória da última gravação.

O DevTools mostra um novo gráfico Memória acima da guia Resumo. Há também um novo gráfico abaixo do gráfico NET, chamado HEAP. O gráfico HEAP fornece as mesmas informações que a linha JS Heap no gráfico Memória.

Este exemplo mostra as métricas de memória acima da guia Resumo.

As linhas coloridas no gráfico correspondem às caixas de seleção coloridas acima dele. Desative uma caixa de seleção para ocultar essa categoria do gráfico.

O gráfico mostra apenas a região da gravação selecionada. No exemplo anterior, o gráfico Memória mostra apenas o uso de memória no início da gravação, até a marca de 1.000 ms.

Conferir a duração de uma parte de uma gravação

Ao analisar uma seção como Rede ou Principal, às vezes você precisa de uma estimativa mais precisa de quanto tempo certos eventos levaram. Mantenha a tecla Shift pressionada, clique e arraste para a esquerda ou direita para selecionar uma parte da gravação. Na parte de baixo da seleção, o DevTools mostra quanto tempo essa parte levou.

Neste exemplo, o carimbo de data/hora 488.53ms na parte inferior da parte selecionada indica quanto tempo ela levou.

Conferir uma captura de tela

Consulte Capturar capturas de tela durante a gravação para saber como ativar as capturas de tela.

Passe o cursor sobre a Visão geral da linha do tempo para conferir uma captura de tela de como a página estava durante esse momento da gravação. A Visão geral da linha do tempo é a seção que contém os gráficos CPU, FPS e NET.

Também é possível visualizar capturas de tela clicando em um frame na seção Frames. O DevTools mostra uma versão pequena da captura de tela na guia Summary.

Este exemplo mostra a captura de tela do frame 195.5ms na guia Summary quando você clica nele na seção Frames.

Clique na miniatura na guia Resumo para aumentar o zoom na captura de tela.

Este exemplo mostra uma captura de tela ampliada depois que você clica na miniatura dela na guia Resumo.

Conferir informações das camadas

Para conferir informações avançadas sobre um frame:

1. Ative a instrumentação de pintura avançada.
2. Selecione um frame na seção Frames. O DevTools mostra informações sobre as camadas na nova guia Layers, ao lado da guia Event Log.

Passe o cursor sobre uma camada para destacá-la no diagrama.

Este exemplo mostra a camada #39 destacada quando você passa o cursor sobre ela.

Para mover o diagrama:

• Clique em Modo de movimento para se mover nos eixos X e Y.
• Clique em Modo de rotação para girar ao longo do eixo Z.
• Clique em Redefinir transformação para redefinir o diagrama para a posição original.

Confira a análise de camadas em ação:

Visualizar o Paint Profiler

Para conferir informações avançadas sobre um evento de pintura:

1. Ativar a instrumentação de pintura avançada.
2. Selecione um evento Paint na faixa Main.

Analisar o desempenho da renderização com a guia "Renderização"

Use os recursos da guia Renderização para visualizar a performance de renderização da página.

Abra a guia Renderização.

Conferir frames por segundo em tempo real com o medidor de QPS

As estatísticas de renderização de frames são uma sobreposição que aparece no canto superior direito da viewport. Ele fornece uma estimativa em tempo real de QPS à medida que a página é executada.

Consulte Estatísticas de renderização de frames.

Mostrar eventos de pintura em tempo real com a exibição em destaque

Use o Paint Flashing para ter uma visualização em tempo real de todos os eventos de pintura na página.

Consulte Pintura intermitente.

Conferir uma sobreposição de camadas com bordas

Use Bordas da camada para conferir uma sobreposição das bordas e dos blocos da camada na parte de cima da página.

Consulte Bordas de camada.

Encontrar problemas de desempenho de rolagem em tempo real

Use Problemas de desempenho de rolagem para identificar elementos da página que têm listeners de eventos relacionados à rolagem que podem prejudicar o desempenho da página. O DevTools destaca os elementos potencialmente problemáticos em azul-esverdeado.

Consulte Problemas de desempenho de rolagem.