Novidades do Chrome 135 para as DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

Melhorias no painel de desempenho

Esta versão traz várias melhorias ao painel Performance.

Links de origem e script para chamadas de perfil e função em "Performance"

A guia Performance > Resumo agora mostra links para os scripts e origens relevantes de chamadas de perfil e função. Assim, você não precisa passar o cursor sobre esses eventos na faixa Principal.

Antes e depois de adicionar origem e origem à guia "Resumo".

Além disso, as faixas Rede e Principal agora mostram nomes de terceiros, se houver, em dicas quando você passa o cursor sobre os eventos.

Problema do Chromium: 368541957.

Suporte a dados de campo "LCP por fase"

Com os dados de campo ativados, o insight Desempenho > Insights > LCP por fase agora mostra os tempos de imagem do 75º percentil do Chrome UX Report em uma tabela adicional. Assim, você pode comparar os tempos diretamente no insight.

Antes e depois de adicionar suporte a dados de campo ao insight "LCP por fase".

Insight "Árvore de dependência da rede"

A guia Performance > Insights adiciona o novo insight Árvore de dependência de rede à coleção. O insight informa se você encadeou solicitações críticas, o que não é recomendado. Passe o cursor sobre as solicitações listadas no insight para destacá-las na faixa Rede.

Para saber mais, consulte Evitar o encadeamento de solicitações críticas.

Destaque da pilha mais pesada

O painel Performance agora destaca itens na faixa Principal quando você passa o cursor sobre eles na barra lateral Árvore de chamadas ou De baixo para cima > Pilha mais pesada e esmaece o restante. Isso permite que você encontre visualmente os itens aninhados na pilha de chamadas que levam mais tempo.

Visualização em árvore de acessibilidade em "Elementos"

A visualização da árvore de acessibilidade de página inteira agora está ativada por padrão no painel Elementos.

Antes, era possível navegar em uma árvore de acessibilidade separada na guia Elementos > Acessibilidade. Agora você pode clicar no botão Mudar para a visualização em árvore de acessibilidade no canto superior direito da árvore do DOM no painel Elementos para alternar entre as árvores do DOM e de acessibilidade da página inteira. Assim, você pode explorar esses elementos e a relação entre eles com mais facilidade.

Antes e depois de ativar a visualização em árvore de acessibilidade de página inteira por padrão .

Com a árvore de acessibilidade, você pode inspecionar como a tecnologia assistiva vê seu conteúdo e mostra atributos ARIA e propriedades de acessibilidade calculadas de nós DOM. Para saber mais, consulte Árvore de acessibilidade completa no Chrome DevTools.

Problema do Chromium: 40808541.

Melhorias nos estados vazios de vários painéis

Os estados vazios (quando nada está aberto) de vários painéis, seções e guias foram simplificados para informar exatamente o que fazer para começar a trabalhar com eles. Alguns estados vazios, por exemplo, no painel Rede, agora têm botões úteis relevantes, como Recarregar página.

Antes e depois de melhorar os estados vazios nos painéis "Rede" e "Pesquisa".

A opção "Perguntar à IA" foi movida para a parte de baixo do menu

A opção Perguntar à IA agora fica na parte de baixo dos menus suspensos, em vez de na parte de cima.

Antes e depois de mover a opção "Perguntar à IA" para a parte de baixo do menu suspenso.

Deixe seu feedback no painel Assistência de IA em crbug.com/364805393.

Lighthouse 12.4.0

O painel Lighthouse agora executa o Lighthouse 12.4.0.

Esta versão marca algumas auditorias de desempenho como informativas em condições de aprovação, em vez de ocultá-las na seção de auditorias aprovadas. Confira a lista completa de mudanças.

Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 40543651.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

  • Performance > Resumo: substituímos as duas linhas Tempo total e Tempo próprio por uma linha Duração que também mostra (self time) entre parênteses, se houver (crbug.com/395572753).
  • Problemas: adicionamos novos tipos de problemas: problemas <select> na árvore de acessibilidade e erros de assinatura de mensagem SRI que ocorrem durante a análise ou validação no serviço de rede (crbug.com/381044049, crbug.com/347890366).
  • Acessibilidade: a guia Elementos > Estilos agora descreve os elementos que você percorre usando a navegação pelo teclado (crbug.com/396311936).
  • Elementos: agora há suporte para problemas com <select>, que são destacados com um sublinhado ondulado (crbug.com/378738916).
  • Rede: os ícones de "substituir ponto" e de aviso de cookie agora são mostrados à direita do nome da guia, em vez de à esquerda (crbug.com/390556283).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.