Novidades do DevTools e do Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Entender 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 ajudar você a entender melhor os erros e avisos encontrados.

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

Explicação de um erro gerada por IA.

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

Suporte a regras @position-try em Elementos > Estilos

Para ajudar na depuração do posicionamento de âncoras CSS, a guia Elements > Styles agora oferece suporte a regras CSS @position-try. A guia resolve os valores de position-try-options e vincula cada opção a uma seção @position-try --name dedicada.

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 âncora do CSS.

Problema do Chromium: 40279608.

Melhorias no painel Origens

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

Configurar a impressão automática e o fechamento de colchetes

Agora é possível ativar ou desativar a impressão automática e o fechamento de colchetes para o Editor em Origens. A formatação bonita torna os arquivos reduzidos 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 Fechamento automático de colchetes e Ajustar automaticamente fontes minificadas em Configurações > Preferências > Fontes.

O antes e o depois da adição de novas configurações para impressão automática e fechamento de colchetes.

Problemas do Chromium: 40865010, 324314570.

As promessas rejeitadas processadas são reconhecidas como capturadas

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

Em outras palavras, quando Sources > Breakpoints > Pause on uncaught exceptions estiver ativado, o depurador não vai pausar em instruções semelhantes a esta:

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

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

Problema do Chromium: 40283993.

Causas de erros no console

O Console agora mostra cadeias de causas de erros 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 de rede

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

Inspecionar cabeçalhos de 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 subrecursos 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 Carregar páginas mais rapidamente usando o tempo de reflexão do servidor com dicas antecipadas.

Problema do Chromium: 40222701.

Ocultar a coluna de 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 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

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

Capturar estatísticas do seletor de CSS

O painel Performance recebe uma nova configuração para capturar estatísticas do seletor de CSS para eventos de 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, a contagem e as tentativas de correspondência e a porcentagem de não correspondências de 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 à esquerda do nome da faixa. Em seguida, clique em para cima ou para baixo para mover a faixa ou clique em para ocultar. Quando terminar, clique no botão Verificar à direita do nome da faixa.

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 retentores em snapshots de heap capturados com o painel Memória.

Para ignorar um retentor, selecione um objeto e, na seção Retenção, clique com o botão direito do mouse em um retentor e selecione Ignorar este retentor 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 oferecem suporte a um número maior (centenas de milhões) de arestas e nós de contenção (332350576).

Problema do Chromium: 327337527.

Lighthouse 11.7.1

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

Entre as mudanças importantes, está o suporte descontinuado ao plug-in Publisher Ads, que se tornou desatualizado nesta versão.

O antes e depois de adicionar e remover o suporte ao plug-in de anúncios do editor.

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:

  • O painel Gravador 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(), que é um comportamento válido (329400119).
  • O painel Sources (Origens) atualizou o destaque de sintaxe. Em particular, agora ele oferece suporte a flags v e d em expressões regulares.
  • A guia Rede > Cookies corrigiu um bug no mapeamento de cookies isentos para cookies de resposta (41491846).
  • A guia Elementos > 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 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 os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

Novidades no DevTools

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