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 a fonte e a origem à guia "Resumo".

Além disso, as faixas Rede e Principal agora mostram os nomes de terceiros, se houver, em dicas de ferramentas 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 Performance > Insights > LCP por fase agora mostra os tempos de imagem do percentil 75 do Relatório de UX do Chrome em uma tabela adicional. Assim, você pode comparar os tempos diretamente no insight.

O antes e o 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ências de rede à coleção. O insight informa se você tem solicitações críticas encadeadas, o que não é recomendado. Passe o cursor sobre as solicitações listadas no insight para que elas sejam destacadas na faixa Rede.

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

Destaque da pilha mais pesada

O painel Performance agora destaca os itens na faixa Principal quando você passa o cursor sobre eles na barra lateral Call tree ou Bottom-up > Heaviest stack e escurece o restante. Isso permite encontrar visualmente os itens aninhados na pilha de chamadas que consomem mais tempo.

Visualização em árvore da acessibilidade no Elements

A visualização da árvore de acessibilidade de página inteira agora é ativada por padrão no painel Elementos. Ele permite inspecionar como a tecnologia adaptativa percebe seu conteúdo e mostra atributos ARIA e propriedades de acessibilidade computadas dos nós DOM.

Para abrir a visualização em árvore da acessibilidade, clique no botão Switch to Accessibility Tree view no canto superior direito da árvore do DOM no painel Elements.

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

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 que você saiba 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 da melhoria dos estados vazios nos painéis de rede e pesquisa.

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

A opção Perguntar à IA agora está na parte de baixo dos menus suspensos, e não 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 sobre o painel de 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 saber os conceitos básicos de uso do painel do Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 40543651.

Destaques diversos

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

  • Performance > Resumo: as duas linhas Total time e Self time foram substituídas por uma linha Duration que também mostra (self time) entre parênteses, se houver (crbug.com/395572753).
  • Problemas: foram adicionados 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 Elements > Styles agora descreve os elementos que você percorre usando a navegação por 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 aviso de cookie e "ponto de substituição" agora aparecem à direita do nome da guia, em vez de à esquerda (crbug.com/390556283).

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes dos usuários.

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 ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.