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

Compatibilidade com 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 do suporte às regras CSS @position-try.

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

Problema do Chromium: 40279608.

Melhorias no painel de 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. O fechamento de chaves adiciona automaticamente uma chave de fechamento () ou }) ou uma tag (>) quando você digita uma chave de abertura.

Para configurar o comportamento relevante, marque ou limpe as novas opções Auto closing brackets e Automatically pretty print minified sources em Settings > Preferences > Sources.

O antes e o depois de adicionar 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 Origens 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, especifique as causas de erros ao capturar e gerar novamente erros. À medida que o console avança na cadeia de causas, ele imprime cada pilha de erros com um prefixo Caused by:, para que você ainda possa ver o erro original.

Os rastros de pilha de impressão antes e depois com prefixos "Caused by".

Problema do Chromium: 40182832.

Melhorias no painel de rede

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

Inspecionar cabeçalhos de dicas iniciais

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

Early Hints é 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.

Antes e depois de adicionar uma seção dedicada para os Early Hints.

Para mais informações, consulte Carregar páginas mais rápido usando o tempo de reflexão do servidor com dicas antecipadas.

Problema do Chromium: 40222701.

Ocultar a coluna de hierarquia

Agora você pode ocultar a coluna Hierarquia no painel Rede, assim como faz com 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.

Antes e depois de adicionar a opção de ocultar a coluna de hierarquia.

Problema do Chromium: 40574989.

Melhorias no painel de desempenho

Esta versão traz várias melhorias para o 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 conferir as estatísticas, selecione um evento Recalculate Style e abra a nova guia Selector Stats. A guia mostra informações sobre o tempo decorrido, as tentativas e a contagem de correspondências e a porcentagem de não correspondências de caminho lento para cada seletor.

Estatísticas do seletor antes e depois de adicionar.

Problema do Chromium: 324282954.

Mudar a ordem e ocultar faixas

O painel Performance tem 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, vai trazer mais melhorias para essa interface.

Problema do Chromium: 311439339.

Ignorar retentores 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. Os retentores ignorados são marcados com o valor ignored na coluna Distância. Para parar de ignorar, clique em Restaurar retentores ignorados na barra de ações na parte de cima.

Antes e depois de adicionar uma opção para ignorar os retentores.

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. Consulte a lista completa de mudanças.

Entre as mudanças importantes, está o suporte descontinuado ao plug-in Publisher Ads, que ficou 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

Confira algumas correções e melhorias importantes desta versão:

  • O painel Gravador está oficialmente fora do status de pré-lançamento (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.
  • Na guia Rede > Cookies, corrigimos um bug com o 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 visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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 o que foi abordado na série Novidades no DevTools.