Novidades do DevTools e do Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

Melhorias no painel de desempenho

Essa versão traz várias melhorias ao painel Desempenho.

Mover e ocultar faixas com o modo de configuração atualizado

Agora você pode entrar no modo de configuração de faixas clicando com o botão direito do mouse no nome da faixa e selecionando Configurar faixas. O botão de edição que exigia espaço extra foi removido.

Antes e depois da substituição do botão "Editar" por uma opção de menu.

No modo de configuração de faixas, você pode mudar a ordem das faixas e ocultá-las. Clique em para cima ou para mover a faixa ou clique em para ocultar. Para sair do modo de configuração, clique em Concluir a configuração de faixas na parte de baixo. Essa configuração persiste para novos traces, mas não para as próximas sessões do DevTools.

Problema do Chromium: 336266699.

Ignorar scripts no Flame Chart

O Flame Chart na faixa Main adiciona suporte à lista de ignorados. Agora você pode clicar com o botão direito do mouse em um script no gráfico e selecionar Adicionar script à lista de ignorados.

A opção de menu para adicionar o script à lista de ignorados, scripts marcados como ignorados e as regras correspondentes em "Configurações".

O gráfico recolhe os scripts ignorados, os marca como Na lista de ignorados e os adiciona a Regras de exclusão personalizadas em Configurações > Lista de ignorados. Os scripts ignorados serão salvos até que você os remova do trace ou das Regras de exclusão personalizadas.

Problema do Chromium: 336266714.

Limitar a CPU em 20 vezes

O menu de limitação CPU nas Configurações de captura do painel Desempenho recebe uma nova opção de lentidão 20x. Agora, é possível reproduzir e analisar com mais precisão problemas de desempenho reais, mesmo em computadores de última geração.

O antes e o depois de adicionar a opção "20xSlowdonw" às "Configurações de captura".

Problema do Chromium: 324978881.

O painel de insights de desempenho será descontinuado

O painel experimental de insights de desempenho será descontinuado em 2024. A equipe do DevTools está trabalhando na integração dos recursos mais úteis ao painel Performance. O painel Insights de desempenho agora mostra um banner na parte de cima com informações sobre a futura descontinuação.

Banner de aviso de descontinuação no painel "Insights de desempenho".

Para saber mais, consulte Ferramentas de performance para o presente e os próximos anos.

Se você tiver feedback sobre o que está funcionando, o que não está e o que pode melhorar, entre em contato com nossa equipe.

Cole as strings inteiras de cabeçalho para substituí-las

Ao substituir cabeçalhos, agora é possível colar uma string de cabeçalho inteira (HEADER_NAME: VALUE), e o DevTools vai dividir a string em : em um nome de cabeçalho e seu valor.

Confira como isso funciona no vídeo a seguir.

Ao editar cabeçalhos, o painel Rede agora avisa se você inseriu caracteres diferentes de alfanuméricos, hifens ou sublinhados.

O aviso ao lado de um nome de cabeçalho com caracteres não aceitos.

Além disso, as opções de substituição do menu e os botões Editar estão desativados para URLs chrome://, o que corresponde ao comportamento pretendido.

Problemas do Chromium: 330967147, 337012362, 328210785.

Encontre o uso excessivo de memória com novos filtros em snapshots de heap

Os snapshots de heap no painel Memory recebem novos filtros que ajudam a encontrar casos comuns de uso ineficiente de memória, como strings duplicadas, objetos retidos por nós do DOM desconectados e o Console do DevTools.

O antes e depois de adicionar opções de filtro para casos comuns de uso ineficiente de memória.

Problema do Chromium: 337094903.

Inspecionar buckets de armazenamento em Aplicativo > Armazenamento

Agora é possível inspecionar buckets de armazenamento em uma árvore dedicada na seção Aplicativo > Armazenamento. Essa árvore, que era experimental, foi ativada por padrão.

O antes e o depois de ativar a árvore de buckets de armazenamento na seção "Armazenamento".

Problema do Chromium: 338094915.

Desativar avisos de self-XSS com uma flag de linha de comando

Se você automatiza o uso do Chrome ou abre o DevTools na linha de comando para depuração, é recomendável desativar o aviso de self-XSS que aparece em todas as novas sessões do DevTools.

Caixa de diálogo de aviso de auto-xss no console.

Agora é possível desativar essa caixa de diálogo transmitindo a flag de linha de comando --unsafely-disable-devtools-self-xss-warnings para o Chrome.

Problema do Chromium: 41491762.

Lighthouse versão 12.0.0

O painel Lighthouse agora executa o Lighthouse 12.0.0.

Esta atualização traz várias mudanças, incluindo a remoção da categoria de PWA, a reorganização da categoria de SEO, a descontinuação da seção "Economias totais", novas auditorias e mudanças na auditoria. 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: 772558.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • Performance:
    • As configurações de captura lenta (Ativar instrumentação avançada de pintura e Ativar estatísticas do seletor de CSS) agora são apagadas automaticamente na próxima sessão do DevTools.
    • A guia Estatísticas do seletor agora não rola automaticamente para a parte inferior quando você aumenta o zoom no Flame Chart e as alterações de dados (337999939).
  • Console: o atalho Ctrl+` agora fecha o Console na gaveta somente se ele estiver em foco (40875466, 328210785).
  • Preenchimento automático: a análise de endereço foi corrigida (335409093, 335409707).
  • Acessibilidade: os avisos do leitor de tela para strings localizadas foram corrigidos (324930007).

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no 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 novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

Novidades no DevTools

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