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 da faixa clicando com o botão direito do mouse no nome da faixa e selecionando Configurar faixas. O botão de edição que precisava de espaço extra foi removido.

O antes e o depois da substituição do botão de edição por uma opção de menu.

O modo de configuração de faixas permite mudar a ordem das faixas e ocultá-las. Clique em arrow_upward para cima ou arrow_downward para mover a faixa ou clique em visibilidade_off para ocultar. Para sair do modo de configuração, clique em Concluir a configuração das faixas na parte inferior. Essa configuração persiste para novos rastreamentos, mas não para 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 é possível clicar com o botão direito do mouse em um script no gráfico e selecionar Adicionar script para ignorar lista.

A opção do menu para adicionar o script de lista de ignorados, os 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 à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 trace ou das Regras de exclusão personalizadas.

Problema do Chromium: 336266714.

Reduzir a CPU em 20 vezes

O menu de limitação da CPU nas Configurações de captura do painel Desempenho recebe uma nova opção de lento de 20x. Assim, você pode reproduzir e analisar com mais precisão os problemas de desempenho do mundo real, mesmo em computadores de última geração.

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

Problema do Chromium: 324978881.

O painel de insights de desempenho será descontinuado

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

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ê tem algum feedback sobre o que está funcionando, o que não está e o que você acha que pode ser feito melhor, entre em contato conosco.

Cole todas as strings do cabeçalho para substituí-las

Ao substituir cabeçalhos, agora você pode colar uma string de cabeçalho inteira (HEADER_NAME: VALUE). O DevTools dividirá a string em : em um nome de cabeçalho e o valor dele.

Confira como isso funciona no vídeo a seguir.

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

O aviso ao lado do nome de um cabeçalho com caracteres incompatíveis.

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

Problemas do Chromium: 330967147, 337012362, 328210785.

Encontrar uso excessivo da memória com novos filtros em snapshots de heap

Os snapshots de heap no painel Memória 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.

As opções de filtro antes e depois da adição para casos comuns de uso ineficiente da memória.

Problema do Chromium: 337094903.

Inspecione os buckets de armazenamento em Aplicativo > Armazenamento

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

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

Problema do Chromium: 338094915.

Desativar avisos 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, talvez seja recomendado desativar o aviso automático de XSS que aparece em todas as novas sessões do DevTools.

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

Agora é possível 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 12.0.0

O painel Lighthouse agora executa o Lighthouse 12.0.0.

Essa atualização traz uma série de mudanças, incluindo remoção da categoria de PWA, reorganização da categoria de SEO, descontinuação da Economia geral, novas auditorias e mudanças de auditoria. Confira 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 nesta versão:

  • Desempenho:
    • As configurações de captura lenta (Ativar instrumentação de pintura avançada e Ativar estatísticas do seletor de CSS) agora serão apagadas automaticamente na próxima sessão do DevTools.
    • Agora, a guia Estatísticas do seletor não rola automaticamente para a parte inferior à medida que você aumenta o zoom do Flame Chart e as mudanças de dados (337999939).
  • Console: o atalho Ctrl+` agora fecha o Console na gaveta apenas se ele estiver em foco (40875466, 328210785).
  • Preenchimento automático: a análise de endereço foi corrigida (335409093, 335409707).
  • Acessibilidade: os avisos sobre leitores 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59