Novidades do DevTools e do Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Entenda melhor os erros e avisos no console com o Gemini

Essa versão do Chrome traz recursos de IA generativa para o Console do DevTools, com o objetivo de explicar melhor os erros e avisos encontrados.

Para conferir uma explicação gerada por IA sobre um erro ou aviso, clique no botão Faísca da lâmpada. Entender este erro (aviso) ao lado da mensagem no console e siga as instruções.

A explicação de um erro gerada por IA.

Para mais informações, consulte Entender melhor os erros e avisos com a IA.

Suporte às regras @position-try em Elementos > Estilos

Para ajudar você a depurar o posicionamento de âncoras de CSS, a seção Elementos > A guia Estilos agora é compatível com regras CSS @position-try. A guia resolve valores de position-try-options e vincula cada opção a uma seção dedicada do @position-try --name.

O antes e o depois são compatíveis com as regras de CSS @position-try.

Para saber mais, consulte Introdução à API de posicionamento de âncoras de CSS.

Problema do Chromium: 40279608.

Melhorias no painel "Origens"

Essa versão traz várias melhorias ao painel Fontes.

Configurar o estilo de formatação automático e o fechamento de colchetes

Agora você pode ativar ou desativar a formatação automática e o fechamento de colchetes do Editor em Fontes. O pretty-printing torna os arquivos minificados legíveis. Quando você digita um parêntese de abertura, um parêntese de fechamento () ou }) ou uma tag (>) é adicionado automaticamente.

Para configurar o comportamento relevante, marque ou desmarque as novas opções de caixa de seleção Fechamento automático de colchetes e check_box Ajustar automaticamente fontes minificadas em Configurações Configurações > Preferências > Fontes.

O antes e o depois de adicionar novas configurações para estilos de formatação automáticos e fechamento de colchetes.

Problemas do Chromium: 40865010, 324314570.

As promessas rejeitadas processadas são reconhecidas como capturadas.

O painel Sources agora reconhece corretamente as promessas rejeitadas como capturadas se você as processou com .catch() ou .then() de dois argumentos.

Em outras palavras, quando Fontes > Pontos de interrupção > check_box Pausar em exceções não capturadas estiver ativado, o depurador não pausará instruções semelhantes às seguintes:

Promise.reject(new Error('fail')).catch((e)=>console.log('caught'));

O antes e o depois de reconhecer rejeições capturadas.

Problema do Chromium: 40283993.

Causas de erro no console

O Console agora mostra cadeias de causas de erro no stack trace, se houver.

Para facilitar a depuração, é possível especificar as causas do erro ao capturar e gerar novamente erros. Como o Console mostra a cadeia da causa, ele mostra cada pilha de erros com um prefixo Caused by: para que você ainda possa ver o erro original.

O antes e o depois de imprimir traces de pilha com prefixos "Caused by".

Problema do Chromium: 40182832.

Melhorias no painel Network

Essa versão traz várias melhorias ao painel Network.

Inspecionar cabeçalhos das dicas iniciais

Os cabeçalhos de dicas iniciais têm uma seção dedicada na guia Cabeçalhos da solicitação do painel Rede. Antes, era possível encontrar os cabeçalhos relevantes na seção Cabeçalhos de resposta.

As dicas iniciais são um código de status HTTP (103 Early Hints) usado para enviar uma resposta HTTP preliminar antes de uma resposta final. Isso permite que um servidor envie dicas ao navegador sobre sub-recursos críticos (por exemplo, uma folha de estilo ou JavaScript crítico) ou origens que provavelmente serão usadas pela página enquanto o servidor está ocupado gerando o recurso principal.

O antes e o depois de adicionar uma seção dedicada às dicas iniciais.

Para mais informações, consulte Carregamentos de página mais rápidos usando o tempo de reflexão do servidor com Dicas iniciais.

Problema do Chromium: 40222701.

Ocultar a coluna Cascata

Agora é possível ocultar a coluna Cascata no painel Rede da mesma forma que você oculta outras colunas. Clique com o botão direito do mouse em qualquer nome de coluna e desmarque a caixa de seleção check_box_outline_blank Cascata no menu suspenso.

O antes e o depois de adicionar a opção para ocultar a coluna "Cascata".

Problema do Chromium: 40574989.

Melhorias no painel de desempenho

Essa versão traz várias melhorias ao painel Desempenho.

Capturar estatísticas do seletor de CSS

O painel Desempenho recebe uma nova configuração para que você capture as estatísticas do seletor de CSS para eventos Recalcular estilo de longa duração.

Para ver as estatísticas, selecione um evento Recalcular estilo e abra a nova guia Estatísticas do seletor. A guia mostra informações sobre o tempo decorrido, as tentativas e a contagem de correspondência e a porcentagem de não correspondências no caminho lento para cada seletor.

O antes e o depois de adicionar estatísticas do seletor.

Problema do Chromium: 324282954.

Mudar a ordem e ocultar faixas

O painel Desempenho recebe um novo modo de configuração que permite mudar a ordem das faixas e ocultá-las.

Para entrar no modo de configuração, clique no botão editar Editar à esquerda do nome da faixa. Em seguida, clique em arrow_upward para cima ou arrow_downward para mover a faixa ou clique em visibility_off para ocultar. Clique no botão Concluído Verificação à direita do nome da faixa quando terminar.

A próxima versão, o Chrome 126, trará mais melhorias para essa interface.

Problema do Chromium: 311439339.

Ignorar retenções no painel Memória

Agora é possível ignorar as retenções em snapshots de heap capturados com o painel Memory.

Para ignorar uma retenção, selecione um objeto e, na seção Retenção, clique com o botão direito do mouse em uma retenção e selecione Ignorar esta retenção no menu suspenso. As retenções ignoradas são marcadas com o valor ignored na coluna Distance. Para parar de ignorar, clique em Restaurar retenções ignoradas na barra de ações na parte superior.

O antes e o depois de adicionar uma opção para ignorar as retenções.

Além disso, os snapshots de heap agora aceitam um número maior (centenas de milhões) de bordas e nós de contenção (332350576).

Problema do Chromium: 327337527.

Lighthouse versão 11.7.1

O painel Lighthouse agora executa o Lighthouse 11.7.1. Veja a lista completa de mudanças.

Entre as mudanças notáveis está o suporte descontinuado para o plug-in de anúncios do editor, que ficou desatualizado nesta versão.

O antes e depois de adicionar a remoção do suporte ao plug-in de anúncios do editor.

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:

  • O painel Gravador agora está oficialmente fora do status de visualização (329271496).
  • O Console agora não mostra um erro quando um formatador personalizado retorna um null para a função body(), o que é um comportamento válido (329400119).
  • O marcador de sintaxe foi atualizado no painel Sources e agora oferece suporte a v e d. em uma expressão regular.
  • No campo Rede > A guia Cookies corrigiu um bug no mapeamento de cookies isentos para cookies de resposta (41491846).
  • Na seção Elementos > A guia Estilos agora faz o seguinte:
    • Mostra regras herdadas totalmente sobrecarregadas com propriedades personalizadas (41489874).
    • Destaca o valor aplicado em light-dark(), dependendo do tema de cores (331123816).

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.