Isso soa familiar? Você está depurando um problema de desempenho no Chrome DevTools, mas a quantidade enorme de informações no painel "Performance" dificulta o foco apenas nas partes mais relevantes e acionáveis. Entre o comprimento da linha do tempo, a profundidade do Flame Chart e a amplitude das muitas faixas de dados diferentes, pode ser difícil navegar. Por mais eficiente que seja o painel "Desempenho", a utilidade dele não precisa ser prejudicada.
Como parte da nossa iniciativa para melhorar as ferramentas de desempenho do Chrome, lançamos recentemente três novos recursos para reduzir a densidade de informações e ajudar os desenvolvedores a personalizar os fluxos de trabalho:
- Ocultar partes irrelevantes da linha do tempo
- Ocultar partes irrelevantes do Flame Chart
- Ocultar faixas irrelevantes
Nesta postagem, vamos analisar melhor cada um desses recursos e mostrar como você pode usá-los para se concentrar apenas nas informações mais importantes.
Oculte partes irrelevantes da linha do tempo
O desempenho da Web opera na escala de milissegundos. Assim, mesmo que o registro de desempenho tenha apenas alguns segundos de duração, há várias oportunidades para você se perder.
No Chrome 122, adicionamos a capacidade de criar navegação estrutural. Esse recurso permite fixar os limites da linha do tempo para que você possa aplicar zoom ou movimentar apenas uma área de interesse definida por você. Restringir a linha do tempo dessa maneira pode ser especialmente útil se você estiver tentando depurar problemas de capacidade de resposta, por exemplo, para concentrar sua atenção em uma única interação ou em uma tarefa longa problemática.
A captura de tela anterior mostra um close da visão geral da linha do tempo, que mostra a atividade principal da linha de execução, como a execução do script e o trabalho de apresentação. Quando você mantém o ponteiro sobre ele, um novo botão aparece para definir os limites da linha do tempo com a janela atual. O botão é rotulado pela largura da janela de tempo, em milissegundos, e pelo ícone . As localizações atuais estão localizadas acima da visão geral da linha do tempo, e cada uma é identificada pelo tamanho da janela de tempo.
Para usar esse recurso:
- Aplique zoom e movimente a linha do tempo até uma área de interesse.
- Clique no ícone de lupa na visão geral da linha do tempo para fixar a linha do tempo e definir uma referência.
- Repita conforme necessário para aumentar o zoom em uma área de interesse aninhada.
- Clique nas localizações atuais para retornar às áreas de interesse anteriores ou a toda a linha do tempo.
Cortar a linha do tempo ajuda a garantir que você nunca role acidentalmente para fora dos limites para uma parte irrelevante da linha do tempo. Quando precisar, no entanto, você pode clicar nas localizações atuais para diminuir o zoom. Outro benefício é que a visão geral do cronograma permanecerá alinhada com as faixas a seguir. Isso pode facilitar muito a detecção de oportunidades de desempenho, como reflows forçados, e a identificação da causa raiz deles no Flame Chart.
Ocultar partes irrelevantes do Flame Chart
Analisar a atividade principal da linha de execução não é uma tarefa simples. Essa parte do painel de desempenho é conhecida como flame Chart, devido ao tamanho e à espessura das pilhas de chamadas. Em alguns casos extremos, essas pilhas podem ser tão difíceis de gerenciar que é difícil entender tudo e se concentrar no que você está tentando otimizar.
A partir do Chrome 124, você pode personalizar exatamente quais entradas no Flame Chart ficam ocultas para que você possa se concentrar nas informações mais úteis.
Quando você clica com o botão direito do mouse em uma função no Flame Chart, um menu de contexto aparece com várias opções para ocultar entradas:
- Ocultar função: remova a função selecionada do diagrama de chamas. Os filhos serão movidos para cima logo após a função pai.
- Ocultar filhos: remove o Flame Chart na função selecionada, ocultando todos os filhos.
- Ocultar filhos repetidos: remova todas as instâncias da função selecionada do restante do Flame Chart.
Há também vários atalhos de teclado úteis que você pode usar quando uma função é selecionada:
- H: ocultar a função selecionada.
- C: oculta os filhos da função selecionada.
- R: ocultar instâncias da função selecionada mais tarde na pilha.
- U: mostra os filhos ocultos da função selecionada.
Oculte permanentemente scripts irrelevantes
A opção Adicionar script à lista de ignorados oculta a função selecionada do Flame Chart, bem como todas as outras funções definidas no mesmo arquivo de script. O script também é adicionado à lista de ignorados, que o depurador do DevTools usa para ignorar funções e desconsiderar exceções originadas do script.
Os scripts adicionados à lista de ignorados são mantidos, portanto, continuarão sendo ocultados do Flame Chart em novos rastros. Scripts fora de seu controle seriam bons candidatos para a lista de ignorados. Por outro lado, a ocultação de funções individuais é temporária para o rastreamento atual e depende mais da situação. Por exemplo, você pode querer ocultar uma pilha complicada de chamadas de função recursivas para facilitar o trabalho com o rastro.
Para reverter a lista de ignorados ou qualquer outra função oculta no Flame Chart, é possível usar o menu de contexto para redefinir os filhos da função selecionada ou redefinir todas as funções ocultas no trace. As funções com filhos ocultos são anotadas com o ícone ▼, que também redefine os filhos quando clicados.
Qualquer profundidade e complexidade desnecessária que você possa tirar do Flame Chart vai torná-lo muito mais utilizável. Quando necessário, ter a capacidade de personalizar quais entradas você vê é uma melhoria ergonômica para ajudá-lo a concentrar sua atenção nas informações mais significativas para a tarefa em mãos.
Ocultar músicas irrelevantes
A atividade da linha de execução principal compõe apenas uma faixa do painel "Desempenho". As faixas no painel "Performance" mostram a atividade de um processo e estão todas alinhadas a uma linha do tempo comum para ajudar na depuração. Além da faixa Main, existem faixas individuais para os outros subframes, threads e workers usados pela página, além das faixas Rede, Frames, Animações e Interações. Ainda mais faixas marcam a atividade de processos de nível inferior do Chrome, como E/S, GPU e Compositor. É muita informação! Ainda assim, na maioria dos fluxos de trabalho de desempenho, você só se preocupará com as informações de algumas faixas por vez.
A partir do Chrome 125, há um novo modo de configuração que permite ocultar faixas desnecessárias ou reorganizá-las como quiser. Por exemplo, se você estiver otimizando uma interação lenta, poderá ocultar tudo, exceto as faixas de Interações, Principal e GPU.
Para editar as faixas, clique com o botão direito do mouse no nome de qualquer faixa e selecione Configurar faixas.... Isso abre o modo de configuração, no qual você poderá mostrar, ocultar ou reorganizar faixas individuais. Clique no botão Concluir a configuração das faixas para salvar suas preferências.
Configurar faixas permite que você controle como o painel "Desempenho" apresenta informações críticas para seu fluxo de trabalho. Você pode usar essas configurações para ocultar a atividade de processos não relacionados e mover as faixas de forma a facilitar o acesso aos dados necessários.
Conclusão
Esses três recursos oferecem novos controles ergonômicos avançados para personalizar seus fluxos de trabalho de performance. Ao usar esses recursos e reduzir a quantidade de ruído, você se coloca em uma posição muito melhor para encontrar o que está procurando e entender os dados.
Adoraríamos saber o que está funcionando bem ou como sua experiência poderia ser melhorada. Entre em contato com @ChromeDevTools se você tiver dúvidas ou quiser enviar feedback geral. Se algo não estiver funcionando ou você tiver uma sugestão para novos recursos, deixe um comentário neste problema aberto.
Este é apenas o começo da nossa iniciativa para melhorar as ferramentas de desempenho do Chrome. Estamos felizes em compartilhar tudo o que temos para tornar o painel "Desempenho" mais fácil de usar e mais poderoso do que nunca. Publicaremos nossa próxima postagem mostrando o próximo lote de recursos aqui no blog do Chrome for Developers. Enquanto isso, confira a página O que há de novo no Chrome para ficar por dentro das novidades do DevTools e do Chrome.