Novidades do DevTools e do Chrome 126

Melhorias no painel de desempenho

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

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

Agora, clique com o botão direito do mouse no nome da faixa e selecione Configurar faixas para entrar no modo de configuração. O botão de edição que exigia espaço extra foi removido.

O modo de configuração de faixas permite mudar a ordem e ocultar faixas. Clique em arrow_upward para cima ou arrow_downward para baixo 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 rastreamentos na parte de baixo. Essa configuração persiste para novos rastreamentos, 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 é possível 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, marca-os como Na lista de ignorados e os adiciona às Regras de exclusão personalizadas em configurações Configurações > Lista de ignorados. Os scripts ignorados são salvos até que você os remova do rastreamento ou das Regras de exclusão personalizadas.

Problema do Chromium: 336266714.

Reduzir 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 redução de velocidade em 20 vezes. Assim, agora é possível reproduzir e analisar problemas de desempenho do mundo real com mais precisão, mesmo em computadores de ponta.

Problema do Chromium: 324978881.

O painel de insights de desempenho será descontinuado

O painel experimental Insights de desempenho será descontinuado em 2024. A equipe do DevTools está trabalhando para integrar os recursos mais úteis ao painel Performance. O painel Insights de performance agora mostra um banner na parte de cima informando sobre a descontinuação.

Para saber mais, consulte Ferramentas de desempenho em 2024 e depois.

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

Cole todas as strings de cabeçalho para substituir

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

Confira isso na prática no vídeo a seguir.

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

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

Problemas do Chromium: 330967147, 337012362, 328210785.

Encontrar 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 ajudam a encontrar casos comuns de uso ineficiente da memória, como strings duplicadas, objetos retidos por nós DOM separados e o console do DevTools.

Problema do Chromium: 337094903.

Inspecionar buckets de armazenamento em "Application > Storage"

Agora você pode inspecionar buckets de armazenamento em uma árvore dedicada na seção Application > Storage. Essa árvore, antes experimental, foi ativada por padrão.

Problema do Chromium: 338094915.

Desativar avisos de XSS automático 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, talvez queira desativar o aviso de XSS automático 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 12.0.0

O painel Lighthouse agora executa o Lighthouse 12.0.0.

Essa atualização traz várias mudanças, incluindo a remoção da categoria PWA, a reorganização da categoria SEO, a descontinuação das economias gerais, novas auditorias e mudanças nas auditorias. 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: 772558.

Destaques diversos

Confira algumas correções e melhorias importantes nesta 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.
  • Agora, a guia Estatísticas do seletor não rola automaticamente para a parte de baixo quando você aumenta o zoom no gráfico de chamas e os dados mudam (337999939).
• Console: o atalho Ctrl+` agora fecha o Console no painel somente se ele estiver em foco (40875466, 328210785).
• Preenchimento automático: a análise de endereço foi corrigida (335409093, 335409707).
• Acessibilidade: foram corrigidos os anúncios do leitor de tela para strings localizadas (324930007).

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.