Novidades do DevTools e do Chrome 126

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.

No modo de configuração de faixas, você pode mudar a ordem das faixas e ocultá-las. Clique em arrow_upward para cima ou arrow_downward para mover a faixa ou clique em visibility_off 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.

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

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.

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.

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.

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.

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.

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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