Novidades do DevTools e do Chrome 126

Sofia Emelianova
Sofia Emelianova
GitHub

Melhorias no painel de desempenho

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

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 baixo 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 rastros, mas não para as próximas sessões do DevTools.

Problema do Chromium: 336266699.

Ignorar scripts no gráfico de chamas

O gráfico de chamas na faixa Principal 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, os scripts marcados como ignorados e as regras correspondentes em "Configurações".

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

Problema do Chromium: 336266714.

Limitar a CPU em 20 vezes

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

Antes e depois de adicionar a opção "20x slowdonw" à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 performance agora mostra um banner na parte de cima informando sobre a descontinuação.

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

Para saber mais, consulte Ferramentas de performance em 2024 e além.

Se você tiver algum feedback sobre o que está funcionando, o que não está e o que pode ser melhorado, entre em contato conosco.

Cole strings de cabeçalho inteiras 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 alerta se você inserir caracteres diferentes de alfanuméricos, hifens e sublinhados.

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

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

Problemas do Chromium: 330967147, 337012362, 328210785.

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

Os instantâneos de heap no painel Memória recebem novos filtros que podem ajudar a encontrar casos comuns de uso ineficiente de memória, como strings duplicadas, objetos retidos por nós DOM separados e o Console do DevTools.

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

Problema do Chromium: 337094903.

Inspecionar buckets de armazenamento em "Application > Storage"

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

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

Problema do Chromium: 338094915.

Desative os avisos de auto-XSS com uma flag de linha de comando

Se você automatizar o uso do Chrome ou abrir o DevTools na linha de comando para depuração, vai ser necessário desativar a advertência de auto-XSS que aparece em cada nova sessão 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 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 economia geral e novas auditorias e mudanças de auditoria. Consulte 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

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

  • Performance:
    • As configurações de captura lenta (Ativar instrumentação de exibição avançada e Ativar estatísticas do seletor de CSS) agora são limpas automaticamente na próxima sessão do DevTools.
    • A guia Estatísticas do seletor agora não rola automaticamente para a parte de baixo quando você aumenta o zoom no gráfico de chamas e as mudanças 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ços 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

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 que os 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.