Hallo! Sou Kayce novamente, redator técnico do DevTools. Para este resumo do DevTools, pensei em mudar um pouco e fazer um resumo de algumas melhorias nas ferramentas de desempenho do DevTools nas últimas versões do Chrome.
Todos os recursos já estão no Chrome Stable, a menos que indicado de outra forma.
Limitação de CPU em um mundo que prioriza os dispositivos móveis
Disponível no Chrome 54, que atualmente é Canary.
Software está comendo o mundo, e dispositivos móveis estão comendo software. O DevTools está evoluindo constantemente para atender melhor às necessidades de um mundo de desenvolvimento mobile-first. O desenvolvimento mais recente nas ferramentas que priorizam dispositivos móveis do DevTools é a limitação da CPU. Use esse recurso para saber melhor o desempenho do seu site em dispositivos com recursos limitados.
Selecione uma das opções no menu suspenso Limitação da CPU no painel "Linha do tempo" para aproveitar a capacidade de computação da sua máquina de desenvolvimento.
Algumas observações sobre limitação de CPU:
- Assim como a limitação de rede, a limitação entra em vigor imediatamente e continua até que você a desative.
- Esse recurso serve para gerar conscientização geral sobre o provável desempenho do seu site em um dispositivo com recursos limitados. É impossível que o DevTools emule de verdade as características de desempenho de um sistema móvel em um chip.
- A limitação é relativa à sua máquina de desenvolvimento. Em outras palavras, uma limitação de 5x em um computador de ponta gera resultados diferentes do que uma limitação de 5x em um laptop econômico de 5 anos.
Dito isso, combine a limitação de CPU com a Limitação de rede e o Modo de dispositivo para ter uma ideia muito melhor sobre a aparência e o desempenho do seu site em dispositivos móveis sem sair do navegador da máquina de desenvolvimento.
Visualização da rede nas gravações da linha do tempo
Marque a caixa de seleção Rede na próxima vez que você fizer uma gravação da linha do tempo para analisar como sua página fez o download dos recursos. Clique em um recurso para exibir mais informações sobre ele no painel "Resumo".
O campo Iniciador no resumo é particularmente útil. Esse campo informa onde o recurso está sendo solicitado.
Listeners de eventos passivos
Listeners de eventos passivos são um padrão emergente para melhorar o desempenho de rolagem. Confira este artigo seu para saber mais:
Como melhorar o desempenho de rolagem com listeners de eventos passivos
O DevTools enviou alguns recursos para ajudar você a encontrar listeners que podem se beneficiar de um pouco de amor ao {passive: true}.
Primeiro, o console emite um aviso quando um listener síncrono está bloqueando a rolagem da página por períodos de tempo excessivos.
Teste isso por conta própria na demonstração abaixo:
Instabilidade de rolagem devido à demonstração de gerenciadores de toque/roda
Em seguida, use o pequeno menu suspenso no painel Listeners de eventos para filtrar listeners passivos ou bloqueadores.
Por fim, é possível alternar o estado passivo ou bloqueio de um listener passando o cursor sobre ele e pressionando Alternar passivo. No momento, esse recurso está limitado aos listeners de eventos touchstart, touchmove, mousewheel e wheel.
Vamos finalizar esta seção com uma pequena dica. Marque a caixa de seleção Scrolling Performance issues (Problemas de desempenho de rolagem) na gaveta de renderização para ter uma representação visual dos possíveis problemas de rolagem. Quando uma seção de uma página é destacada, isso significa que há um listener vinculado a essa seção da página que pode afetar negativamente o desempenho de rolagem.
Agrupar por atividade
Em meados de junho, o painel Árvore de chamadas no painel "Linha do tempo" recebeu uma nova categoria de classificação: "Agrupar por atividade". Esse agrupamento permite que você visualize quanto tempo sua página gastou analisando HTML, avaliando scripts, pintura e assim por diante.
Estatísticas da linha do tempo no painel de fontes
Crie uma gravação da Linha do tempo com a opção Perfil JS ativada. Você verá um detalhamento função por função dos tempos de execução no painel Origens.
Compartilhe sua opinião
Como sempre, adoraríamos ouvir seu feedback ou ideias sobre qualquer assunto relacionado ao DevTools.
- Envie um ping no ChromeDevTools (link em inglês) no Twitter para fazer perguntas rápidas, dar feedback ou compartilhar novas ideias.
- Para discussões mais longas, a melhor opção é a lista de e-mails ou o Stack Overflow.
- Para qualquer coisa relacionada aos documentos, abra um problema no nosso repositório de documentos.
Até o próximo mês!