Referência dos recursos de desempenho

Esta página é uma referência abrangente dos 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 desempenho

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

Gravar o desempenho da 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 Parar para interromper a gravação.

Gravar 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 . Primeiro, o DevTools navega até about:blank para limpar todas as capturas de tela e 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 aumenta o zoom automaticamente na 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 Acessar uma captura de tela para saber como interagir com elas.

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

Enquanto estiver gravando uma página, clique em Collect lixeira 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 de 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 Disable JavaScript Samples.
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 Main da gravação é muito mais curta quando a amostragem está desativada, porque 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 com o nível de limitação escolhido.

A limitação está relacionada aos recursos do seu computador. Por exemplo, a opção 2x lentidão faz com que a CPU opere duas vezes mais lentamente do que a capacidade 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 o desempenho do seletor de CSS durante Recalcular eventos de 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 aprender a interagir com as informações de pintura, consulte Ver camadas e Ver o perfil 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 de seus aplicativos, por exemplo, para controlar o tamanho do pool de pthread 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 Simultaneidade 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 um registro de performance

Depois de gravar o desempenho do tempo de execução ou o desempenho do carregamento da gravação, o painel Desempenho fornece muitos dados para analisar o desempenho 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 Desempenho e na parte superior da gravação, é possível ver a seção Visão geral da linha do tempo com os gráficos de 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. Focar na faixa Main ou em qualquer um dos vizinhos.
2. Use as teclas W, A, S, D para aumentar, mover para a esquerda, diminuir 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 vizinhas).
2. Com dois dedos, deslize para cima para diminuir o zoom, para a esquerda para mover para a esquerda, para baixo para aumentar o zoom e para a direita para mover para a direita.

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

Com a Visão geral da linha do tempo, você pode criar várias localizações atuais aninhadas em sucessão, aumentando os níveis de zoom e navegar livremente entre os níveis de zoom.

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 se expande para preencher a Visão geral da linha do tempo. Uma cadeia de navegação estrutural começa a ser criada na parte superior da Visão geral da linha do tempo.
3. Repita as duas etapas anteriores para criar outra navegação estrutural aninhada. Você pode continuar aninhando navegação estrutural desde que o intervalo da seleção seja maior que cinco milissegundos.
4. Para pular até um nível de zoom escolhido, clique na localização atual 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 chama longo na faixa Main ou qualquer um dos vizinhos, clique e mantenha pressionado, depois arraste em qualquer direção até que o que você está procurando apareça.

Atividades de pesquisa

É possível pesquisar nas atividades no rastreamento Principal e nas 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 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 no nome de uma faixa e selecione Configurar faixas.
2. Clique em arrow_upward para cima ou arrow_downward 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 das faixas na parte de baixo para sair do modo de configuração.

Assista ao vídeo para ver esse 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.

Ver a atividade da linha de execução principal

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

Clique em um evento para conferir mais informações na guia Resumo. O painel Desempenho descreve 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 Flame Chart

O painel Performance representa a atividade da linha de execução principal em um diagrama de chamas. O eixo x representa o registro ao longo do tempo. O eixo y representa a pilha de chamadas. Os eventos na parte superior 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 Desempenho atribui aos scripts cores aleatórias para quebrar o Flame Chart e torná-lo mais legível. No exemplo anterior, as chamadas de função de um script têm cor azul claro. As chamadas de outro script têm a cor rosa claro. O amarelo mais escuro representa a atividade de script e o roxo representa a atividade de renderização. Esses eventos nas cores amarelo-escuro e roxo são consistentes em todas as gravações.

Tarefas longas também são destacadas com um triângulo vermelho e a parte com mais 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 Flame Chart detalhado das chamadas JavaScript, consulte Desativar amostras de JavaScript. Quando as amostras de JS estão desativadas, apenas os eventos de alto nível, como Event (click) e Function Call, aparecem.

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
• Request Idle Callback -> Fire Idle Callback
• Instalar Timer -> Timer disparado
• Criar WebSocket -> Enviar... e Receber handshake de WebSocket ou Destruir WebSocket

Para ver as setas, encontre um iniciador ou o evento que ele causou no Flame Chart e selecione-o.

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

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

Para organizar o Flame Chart na linha de execução Main, você pode ocultar as funções selecionadas ou as filhas delas:

1. Na faixa Main, 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 rastros (T)
   • Adicionar script para ignorar lista (I)

   

   Um botão suspenso arrow_drop_down aparece ao lado do nome da função com os 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 Flame Chart

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 recolhe os scripts ignorados, os marca como Na lista de ignorados e os adiciona às regras de Exclusã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 registrar 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 visualizar as atividades raiz que geram a maior parte do trabalho, use a guia Call Tree.
• Para conferir as atividades em que mais tempo foi gasto diretamente, use a guia Bottom-Up.
• Para ver 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 Corresponde à palavra inteira.

Cada visualização tabular no painel Desempenho mostra links para atividades como chamadas de funções. 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 encontrará automaticamente os arquivos originais.

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

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 Flame Chart da faixa Main, as atividades raiz aparecem na parte superior do gráfico. Nas guias Call Tree e Event Log, as atividades raiz são os itens de nível superior.

Consulte A guia Árvore de chamadas para um exemplo de atividades raiz.

A guia "Árvore de chamadas"

Use a guia Call Tree para visualizar 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.

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

Clique em Tempo próprio, 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 Pilha mais pesada mostra quais filhos da atividade selecionada levaram mais tempo para serem executados.

Guia Bottom-Up

Use a guia Bottom-Up para ver quais atividades levaram diretamente mais tempo, no total.

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

No diagrama de chama Main 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 Flame Chart, o amarelo abaixo das chamadas para wait representa, na verdade, milhares de chamadas Minor GC. Assim, é possível observar que, na guia Bottom-Up, a próxima atividade mais cara é a 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 filhas dela.

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 selecionar partes.

A coluna Horário de início representa o ponto em que essa atividade foi iniciada, 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 as 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.

Mostrar marcações de tempo

Na faixa Tempos, visualize marcadores importantes, como:

• First Paint (FP)
• First Contentful Paint (FCP, na sigla em inglês)
• Maior exibição de conteúdo (LCP)
• Evento DOMContentLoaded (DCL)
• Evento de carregamento (L)
• Suas chamadas performance.mark() personalizadas. Uma marca individual com uma dica é mostrada abaixo em 813,44 ms, com o rótulo Starting to run JavaScript.
• Suas chamadas performance.measure() personalizadas. Um período amarelo é mostrado abaixo, rotulado como 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.

Mostrar interações

Confira as interações do usuário no rastreamento Interações para rastrear possíveis problemas de capacidade de resposta.

Para conferir as interações:

1. Abra o DevTools, por exemplo, nesta página de demonstração.
2. Abra o painel Desempenho e inicie uma gravação.
3. Clique em um elemento (café) e pare 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 Interactions marca as interações durante 200 milissegundos com um triângulo vermelho no canto superior direito.

Ver atividade da GPU

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

Conferir a atividade do raster

Veja a atividade de varredura 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 ver quanto tempo um frame específico levou.
• Use o medidor de QPS para ter uma estimativa em tempo real do QPS enquanto a página é executada. Consulte Visualizar quadros 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 parcialmente apresentado (amarelo com padrão de linhas de traço largas e esparsas). 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 descartado (vermelho com um padrão de linha sólida densa). 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

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

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

As solicitações de bloqueio de renderização 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 necessário para executá-la.
• 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 das solicitações, descrito posteriormente.

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

Além disso, o painel Desempenho mostra a guia Resumo com mais informações sobre a solicitação, incluindo, entre outros, os campos Prioridade inicial e Prioridade (final). Se os valores forem diferentes, a prioridade de busca da solicitação mudou 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 prazos da solicitação.

A solicitação de www.google.com é representada por uma linha à esquerda (|–), uma barra no meio com uma parte escura e outra 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 correspondente na guia Resumo e clique em Revelar no painel Rede. O DevTools leva você ao painel Network e seleciona a solicitação correspondente. Abra a guia Tempo.

Veja como esses dois detalhamentos são mapeados um ao outro:

• 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 é a Content download.
• A linha à direita (–|) é o tempo gasto aguardando a linha de execução principal. A guia Rede > Tempo não o exibe.

Ver métricas de memória

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

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

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 selecionada para a gravação. 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.

Ver 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 demorou.

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

Acessar uma captura de tela

Consulte Fazer capturas de tela ao gravar para saber como ativar esse recurso.

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 ampliar a 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:

Acessar o criador de perfil de pintura

Para visualizar 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 ajudar a visualizar o desempenho de renderização da sua 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 Flash de tinta.

Ver uma sobreposição de camadas com bordas de camadas

Use Bordas da camada para visualizar uma sobreposição de bordas de camadas e blocos na parte superior da página.

Consulte Bordas de camada.

Encontrar problemas de desempenho na 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 a performance da página. O DevTools descreve os elementos potencialmente problemáticos em azul-esverdeado.

Consulte Problemas de desempenho de rolagem.