Referência dos recursos de desempenho

Esta página é uma referência abrangente dos recursos do Chrome DevTools relacionados à análise de desempenho.

Consulte Introdução à análise do desempenho do ambiente de execução para acessar um tutorial guiado sobre como analisar um o desempenho da página usando o Chrome DevTools.

Gravar desempenho

Você pode gravar o tempo de execução ou o desempenho do carregamento.

Gravar o desempenho da execução

Registre o desempenho do tempo de execução quando quiser analisar o desempenho de uma página durante a execução, como em vez de carregar.

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

3. Clique em Record .

   

4. Interaja com a página. O DevTools registra todas as atividades da página que ocorrem como resultado da e interações.

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

Gravar desempenho de carregamento

Registre o desempenho de carregamento quando quiser analisar o desempenho de uma página durante o carregamento, já que em vez de correr.

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

3. Clique em Iniciar 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, DevTools registra métricas de desempenho enquanto a página é recarregada e, em seguida, interrompe automaticamente o registro de uma alguns segundos após o carregamento terminar.

   

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

Nesse exemplo, o painel Desempenho mostra a atividade durante um carregamento de página.

Fazer capturas de tela durante a gravação

Ative a caixa de seleção Capturas de tela para capturar cada frame durante a gravação.

Consulte Conferir 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 Coletar lixo mop para forçar a coleta de lixo.

Mostrar configurações de gravação

Clique em Configurações de captura para expor mais configurações relacionadas à forma como o DevTools captura as gravações de desempenho.

Desativar amostras de JavaScript

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

1. Abra o menu Configurações de captura . Consulte Mostrar 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 amostras de JavaScript. A A faixa Main da gravação fica muito mais curta quando a amostragem está desativada, porque omite todos os das pilhas de chamadas do JavaScript.

Este exemplo mostra uma gravação com amostras de JS desativadas.

Este exemplo mostra uma gravação com amostras de JS ativadas.

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 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 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 lentidão 2x faz com que a CPU opere duas vezes mais devagar que a capacidade normal. O DevTools não consegue simular as CPUs de verdade dos dispositivos móveis, porque a arquitetura dos dispositivos móveis é muito diferente da desktops e laptops.

Ativar estatísticas do seletor de CSS

Para ver as estatísticas dos seletores de regras CSS durante eventos Recalcular estilo de longa duração:

1. Abra o menu Configurações de captura . Consulte Mostrar 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 instrumentação de exibição avançada

Para conferir a instrumentação detalhada de pintura:

1. Abra o menu Configurações de captura . Consulte Mostrar configurações de gravação.
2. Marque a caixa de seleção Enable advanced paint instrumentation (Ativar instrumentação de pintura avançada).

Para aprender a interagir com as informações de pintura, consulte Ver camadas e Ver camadas de pintura criador de perfil.

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 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 Save Profile.

Carregar uma gravação

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

Limpar a gravação anterior

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

Analisar um registro de performance

Depois de registrar o desempenho de execução ou o registro de desempenho de carregamento, o Relatório de desempenho fornece muitos dados para analisar o desempenho do que acabou de acontecer.

Navegar pela gravação

Para inspecionar melhor a gravação de apresentação, você pode selecionar uma parte dela, rolar um diagrama de chamas longo, aumentar e diminuir o zoom e usar a navegação estrutural para pular entre níveis de zoom.

Selecione 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 e segure, depois arraste para a esquerda ou para a 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 deslize para a direita para mover para a direita.

Crie navegação estrutural e alterne 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 pular para o nível escolhido.

Para criar e usar a navegação estrutural:

1. Em 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.

Rolar um diagrama de chamas longo

Para rolar um gráfico de chama longo na faixa Main ou em qualquer um dos vizinhos, clique e mantenha pressionado, depois arraste em qualquer direção até que o que você está procurando apareça.

Pesquisar atividades

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

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

Este exemplo mostra uma expressão regular na caixa de pesquisa na parte de baixo da tela 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_less 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 Diferenciar maiúsculas de minúsculas para que a consulta diferencie maiúsculas de minúsculas.
• Clique em regular_expression Expressão regular para usar uma expressão regular na sua consulta.

Para ocultar a caixa de pesquisa, clique em Cancelar.

Mudar a ordem das faixas e ocultá-las

Para organizar o rastreamento de desempenho, 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á-lo.
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 de faixa para novos traces, mas não nas próximas sessões do DevTools.

Ver a atividade da linha de execução principal

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

Clique em um evento para ver mais informações sobre ele 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 principal da linha de execução em um Flame Chart. 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 Flame Chart na faixa Main. Um evento click causou uma chamada de função anônima. Essa função, por sua vez, chama 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:

Nesse 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.

Além disso, a faixa Principal mostra informações sobre perfis de CPU iniciados e interrompidos com as funções do 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.

monitorar 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
• 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 os filhos no Flame Chart

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 à lista de ignorados (I)

   

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

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

   

3. Para redefinir uma função com filhos ocultos ou todo o Flame Chart, selecione a função e pressione U ou clique com o botão direito do mouse em qualquer função e selecione Redefinir rastro, respectivamente.

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 serão salvos até que você os remova do trace ou das Regras de exclusão personalizadas.

Ver atividades em uma tabela

Depois de registrar uma página, você não precisa depender apenas da faixa Principal para analisar as atividades. O DevTools também oferece três visualizações tabulares para análise de atividades. Cada visualização oferece um perspectiva sobre as atividades:

• Quando você quiser visualizar as atividades raiz que geram a maior parte do trabalho, use a Árvore de chamadas guia.
• Quando você quiser ver as atividades em que mais tempo foi gasto diretamente, use o Guia Bottom-Up.
• Quando você quiser ver as atividades na ordem em que ocorreram durante a gravação, use guia Log de eventos.

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

• match_case Diferenciar maiúsculas de minúsculas.
• 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

Aqui está uma explicação do conceito de atividades raiz mencionado na guia Árvore de chamadas, Guia De baixo para cima e as seções Log de eventos.

As atividades raiz são aquelas que fazem com que o navegador realize algum trabalho. Por exemplo, quando você clica em um o navegador dispara uma atividade Event como a atividade raiz. Esse Event pode fazer com que um gerenciador executar.

No Flame Chart da faixa Main, as atividades raiz aparecem na parte superior do gráfico. Na seção Chamada Árvore e Registro de eventos, 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 ver quais atividades raiz geram mais trabalho.

A guia Call Tree só mostra as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como selecionar partes específicas.

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

O tempo próprio representa o tempo gasto diretamente nessa atividade. Tempo total representa 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 Filtrar para filtrar eventos por nome de atividade.

Por padrão, o menu Agrupamento é definido como Sem agrupamento. Use o menu Agrupamento para ordenar tabela de atividade baseada em vários critérios.

Clique em Mostrar pilha mais pesada. para revelar outra tabela à direita da tabela Activity. Clique em uma atividade para preencher Tabela Pilha mais pesada. A tabela Pilha mais pesada mostra quais filhos do a atividade levou mais tempo para ser executada.

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 selecionar partes específicas.

No diagrama de chama da faixa Principal deste exemplo, é possível ver que quase todas as foi gasto executando as três chamadas para wait(). Consequentemente, a principal atividade no A guia De baixo para cima é wait. No diagrama de chamas, o amarelo abaixo do chamadas para wait são, na verdade, milhares de chamadas Minor GC. Portanto, é possível ver que no 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 todas as ocorrências dela.

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

A guia "Log de eventos"

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

A guia Log de eventos só mostra as atividades durante a parte selecionada da gravação. Consulte Selecionar uma parte de uma gravação para saber como selecionar partes específicas.

A coluna Horário de início representa o ponto em que a atividade iniciou, 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 1.573 ms após o início da gravação.

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

As colunas Tempo total representam o tempo gasto diretamente nessa atividade ou em qualquer crianças.

Clique em Horário de início, Horário próprio ou Tempo total para classificar a tabela por essa coluna.

Use a caixa Filtrar para filtrar as atividades por nome.

Use o menu Duração para filtrar todas as atividades que levaram menos de 1 ms ou 15 ms. Por padrão o menu Duração está 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 tudo. as atividades dessas categorias.

Ver 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 ao carregar (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.

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 Interactions mostra a interação de Pointer. 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 ver uma dica com os dados de atraso de entrada, tempo de processamento e atraso da apresentação.

A faixa Interactions também mostra avisos da Interaction to Next Paint (INP) para interações com mais de 200 milissegundos na guia Summary e em uma dica 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

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

Conferir atividade de varredura

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 quadros 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 Exibir quadros por segundo em tempo real com o medidor de QPS.

A 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 conforme esperado e dentro do prazo;
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 no tempo. Por exemplo, caso o trabalho da linha de execução principal do processo do renderizador (animação de tela) esteja atrasado, mas a linha de execução do compositor (rolagem) esteja no tempo.
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 ver mais informações sobre ele na guia Resumo. DevTools contorna o frame selecionado em azul.

Ver 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 em Rede, 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.
• 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 (finais). 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 (–|).

Confira mais detalhes sobre os 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 Rede e seleciona a solicitação correspondente. Abra a guia Tempo.

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

• A linha à esquerda (|–) representa tudo até o grupo de eventos Connection start, inclusive. Em outras palavras, é tudo 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. No campo Rede > Tempo não mostrará essa informação.

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 o gráfico NET, chamado HEAP. O gráfico HEAP fornece as mesmas informações que o arquivo JS Linha Heap no gráfico de Memória.

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

As linhas coloridas no gráfico mapeiam para as caixas de seleção coloridas acima do gráfico. Desmarque 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 de Memória mostra apenas o uso da memória no início da gravação, até aproximadamente 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 do quanto tempo certos eventos levaram. Segure a tecla Shift, clique e segure 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 que 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 Visão geral da linha do tempo para conferir uma captura de tela da aparência da página durante aquele momento da gravação. A Visão geral da linha do tempo é a seção que contém os gráficos de CPU, FPS e NET.

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

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 na guia Resumo.

Ver informações das camadas

Para ver informações de camadas avançadas sobre um frame:

1. Ative a instrumentação avançada de exibição.
2. Selecione um frame na seção Frames. O DevTools exibe informações sobre suas camadas na nova guia Camadas, ao lado da guia Log de eventos.

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 panorama se mover pelos eixos X e Y.
• Clique em Modo de rotação. para girar ao longo do eixo Z.
• Clique em Reset Transform . 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 exibição:

1. Ative a instrumentação avançada de exibição.
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.

Veja quadros 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 janela de visualização. Ela fornece uma estimativa em tempo real de QPS enquanto a página é executada.

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

Veja eventos de pintura em tempo real com o Paint Flashing

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

Consulte Atualização de pintura.

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 com listeners de eventos relacionados à rolagem que podem prejudicar o desempenho da página. O DevTools descreve o elementos potencialmente problemáticos na cor verde-petróleo.

Consulte Problemas de desempenho de rolagem.