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 a extensão da linha do tempo, a profundidade do diagrama de chamas e a amplitude das muitas trilhas diferentes de dados, pode ser difícil navegar. Por mais incrível que seja o painel "Performance", a usabilidade não pode ser prejudicada.
Como parte da nossa iniciativa para melhorar as ferramentas de desempenho do Chrome, lançamos recentemente três novos recursos com o objetivo de 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
Neste post, vamos analisar cada um desses recursos e mostrar como usá-los para se concentrar apenas nas informações mais importantes.
Ocultar partes irrelevantes da linha do tempo
O desempenho da Web opera na escala de milissegundos. Assim, mesmo que seu registro de desempenho tenha apenas alguns segundos de duração, há grandes oportunidades para você perder seu lugar.
No Chrome 122, adicionamos a capacidade de criar navegação estrutural. Esse recurso permite fixar os limites da linha do tempo para que você só possa aplicar zoom ou mover dentro de 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 focar sua atenção em uma única interação ou em uma tarefa longa e problemática.
A captura de tela anterior mostra um close da visão geral da linha do tempo, que exibe a atividade principal da linha de execução, como execução de script e trabalho de apresentação. Ao manter o ponteiro sobre ela, um novo botão aparece, definindo os limites da linha do tempo para a janela atual. O botão é identificado pela largura da janela de tempo, em milissegundos, e pelo ícone . A localização atual fica acima da visão geral da linha do tempo, e cada uma é rotulada pelo tamanho da janela de tempo.
Para usar esse recurso:
- Aumente o zoom e mova a linha do tempo para 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 um breadcrumb.
- Repita conforme necessário para aplicar zoom em uma área de interesse aninhada.
- Clique no caminho para retornar às áreas de interesse anteriores ou à linha do tempo completa.
O corte da linha do tempo ajuda a garantir que você nunca role acidentalmente para uma parte irrelevante da linha do tempo. No entanto, quando necessário, você pode clicar nas trilhas para sair do zoom. Outro benefício é que a visão geral do cronograma vai ficar alinhada com as seguintes faixas. Isso facilita muito a identificação de oportunidades de performance, como refluxos forçados, e a identificação da causa raiz no gráfico de chamas.
Ocultar partes irrelevantes do gráfico de chama
Analisar a atividade da linha de execução principal não é uma tarefa simples. Essa parte do painel "Performance" é conhecida como gráfico de chamas, devido à quantidade de pilhas de chamadas que podem ser exibidas. Em alguns casos extremos, essas pilhas podem ser tão difíceis de usar que fica difícil entender tudo e se concentrar no que você está tentando otimizar.
A partir do Chrome 124, é possível personalizar exatamente quais entradas no Flame Chart ficarão ocultas para 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 Flame Chart. Os filhos vão subir para aparecer imediatamente após a função pai.
- Ocultar filhos: poda o diagrama de chamas 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.
Também há vários atalhos de teclado úteis que podem ser usados quando uma função é selecionada:
- H: ocultar a função selecionada
- C: ocultar os filhos da função selecionada
- R: oculta instâncias da função selecionada mais tarde na pilha.
- U: mostra os filhos ocultos da função selecionada.
Ocultar permanentemente scripts irrelevantes
A opção Adicionar script à lista de ignorados oculta a função selecionada do gráfico em chamas, 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 pular funções e ignorar exceções originadas do script.
Os scripts adicionados à lista de ignorados são mantidos, então eles vão continuar ocultos do gráfico de chamas em novos rastros. Scripts fora do seu controle são 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, talvez você queira ocultar uma pilha complexa de chamadas de função recursivas para facilitar o trabalho com o trace.
Para reverter a lista de ignorados ou qualquer outra função oculta no gráfico de chamas, use o menu de contexto para redefinir os filhos da função selecionada ou todas as funções ocultas no rastro. As funções com filhos ocultos são anotadas com o ícone ▼, que também redefine os filhos quando clicado.
Qualquer profundidade e complexidade desnecessárias que você possa remover do diagrama de chamas vai torná-lo muito mais útil. Quando necessário, ter a capacidade de personalizar as entradas que você vê é uma melhoria ergonômica que ajuda a concentrar sua atenção nas informações mais importantes para a tarefa em questão.
Ocultar faixas irrelevantes
A atividade da linha de execução principal constitui apenas uma faixa do painel de desempenho. As faixas no painel "Desempenho" mostram a atividade de um processo, e todas elas estão alinhadas a um cronograma comum para ajudar na depuração. Além da faixa Main, há faixas individuais para os outros subframes, linhas de execução e workers usados pela página, assim como as faixas Network, Frames, Animations e Interactions. Mais faixas ainda 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ê se preocupa apenas com as informações de algumas faixas por vez.
A partir do Chrome 125, haverá um novo modo de configuração que permite ocultar faixas desnecessárias ou reorganizá-las como você quiser. Por exemplo, se você estiver otimizando uma interação lenta, poderá ocultar tudo, menos as faixas Interactions, Main e GPU.
Para editar, clique com o botão direito do mouse no nome de qualquer faixa e selecione Configurar faixas.... Isso abre o modo de configuração, em que você pode mostrar, ocultar ou reorganizar faixas individuais. Clique no botão Concluir a configuração das faixas para salvar suas preferências.
Configurar faixas coloca você no controle da forma como o painel de desempenho apresenta informações críticas para seu fluxo de trabalho. Essas configurações podem ser usadas para ocultar a atividade de processos não relacionados e mover os trilhos de maneira a facilitar o acesso aos dados necessários.
Conclusão
Esses três recursos oferecem novos controles ergonômicos 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.
Queremos saber o que está funcionando bem ou como podemos melhorar sua experiência. Entre em contato com a gente pelo @ChromeDevTools se tiver dúvidas ou feedback geral. Se algo não estiver funcionando ou você tiver uma sugestão de novos recursos, deixe um comentário neste problema aberto.
Essa é apenas o começo da nossa iniciativa para melhorar as ferramentas de desempenho do Chrome. Estamos animados para compartilhar tudo o que estamos preparando para tornar o painel de 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 para desenvolvedores. Enquanto isso, confira a página Novidades do Chrome para ficar por dentro de tudo o que há de novo no Chrome e no DevTools.