Novidades do Chrome 136 para as DevTools

Sofia Emelianova

Melhorias no painel de desempenho

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

Novos insights de performance

A guia Performance > Insights recebe novos insights:

• HTTP moderno, que destaca solicitações que usam o protocolo HTTP/1.1 antigo.
• Use ciclos de vida eficientes de cache, que destacam solicitações que podem se beneficiar de ciclos de vida mais longos e acelerar o tempo de carregamento do seu site.
• Exibição de fontes que mostra a economia de tempo estimada se você otimizar font-display.

Clique para destacar

Agora é possível clicar em itens nas tabelas Resumo, De baixo para cima, Árvore de chamadas e Registro de eventos para manter os eventos correspondentes destacados no rastreamento e diminuir o restante enquanto você navega pelo rastreamento de desempenho.

Tempos do servidor no resumo de solicitações de rede

A guia Resumo no painel Performance agora mostra os tempos do servidor para solicitações de rede que implementam tecnologias de renderização do lado do servidor.

O painel Performance usa os dados do cabeçalho Server-Timing.

Filtrar cookies em "Privacidade e segurança"

A tabela na seção Privacidade e segurança > Privacidade > Cookies de terceiros recebe um filtro para que você encontre os cookies de seu interesse mais rápido.

Tamanhos em unidades kB nas tabelas em todos os painéis

Para manter as unidades iguais no mesmo contexto, as tabelas nos painéis Rede e Memória e a tabela de terceiros / de origem em Performance > Resumo agora mostram todos os tamanhos em kB. Assim, você pode comparar diretamente os números na mesma coluna e em diferentes painéis, em vez de ficar de olho nas unidades MB, kB e B.

O preenchimento automático é compatível com corner-shape e corner-*-shape em "Elementos" > "Estilos"

O preenchimento automático em Elementos > Estilos agora pode sugerir os valores correspondentes para as propriedades corner-shape e corner-*-shape.

Problema do Chromium: 402346406.

Experimental: destacar problemas com elementos e atributos no DOM

Com esse novo recurso experimental, o painel Elementos agora pode destacar problemas com elementos ou atributos DOM com um sublinhado vermelho ondulado. Passe o cursor sobre esses elementos ou atributos para ver uma dica com um link para o erro correspondente no painel Problemas.

No momento, o painel Elementos destaca descendentes inválidos de <select>, definições ARIA incompatíveis e atributos ARIA inválidos.

Problema do Chromium: 378738916.

Lighthouse 12.5.0

O painel Lighthouse agora executa o Lighthouse 12.5.0.

Principalmente nesta versão, legacy-javascript agora usa Baseline em vez de esmodules. Confira a lista completa de mudanças.

Para aprender o básico sobre como usar o 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 > Insights > Árvore de dependência de rede: agora mostra o tempo de todas as solicitações de rede na árvore de rede (400708304).
  • Árvore de dependência da rede: agora mostra o tempo de todas as solicitações de rede na árvore de rede (400708304).
• Animações: foi corrigido um bug que fazia com que elementos separados aparecessem no painel Memória devido a animações capturadas 400635410.
• Gravador: agora usa a mesma caixa de diálogo de confirmação que colar código ao executar a gravação pela primeira vez.
• Camadas: agora mostra o número total de camadas e a memória total de todas as camadas visíveis na barra de status na parte de baixo.
• Memória: a inicialização do snapshot de heap foi otimizada com a paralelização de tarefas entre dois workers em vez de um (42203857).
• Problemas: agora informa erros de CORS de acesso à rede local (LNA, na sigla em inglês) (395895368).
• Acessibilidade:
  • Dicas: agora aparecem quando uma tecla de atalho é pressionada, em vez de quando o foco é ativado (396311936).
  • Elementos > Estilos: agora é possível interagir com a função var() usando o teclado. Isso significa que você pode selecionar --custom-property e pressionar Enter para acessar o destino do link (401212692).

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

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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