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 de faixa atualizado

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

O antes e o depois de substituir o botão de edição por uma opção de menu.

O modo de configuração da faixa permite que você altere a ordem das trilhas e as oculte. 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 das 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 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.

Antes e depois de adicionar o "20xSlowdonw" para "Configurações de captura".

Problema do Chromium: 324978881.

O painel de insights de desempenho será descontinuado

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

O banner de aviso de descontinuação em "Insights de desempenho" do painel de controle.

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 você pode 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 o valor dele.

Veja 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 incompatíveis.

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.

Identifique o uso excessivo da 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 em Application > seção 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.

A caixa de diálogo de aviso de self-xss no console.

Agora você pode desativar essa caixa de diálogo transmitindo a sinalização 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.

Essa 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, novas auditorias e mudanças de auditoria. Veja a lista completa de mudanças.

Para aprender os conceitos básicos do uso do painel Lighthouse no 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:

  • Desempenho:
    • 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

Use 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, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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