Novidades do DevTools e do Chrome 125

Sofia Emelianova
Sofia Emelianova
GitHub

Entenda melhor os erros e avisos no console com o Gemini

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

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

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

Compatibilidade com regras @position-try em "Elementos > Estilos"

Para ajudar você a depurar o posicionamento de âncora CSS, a guia Elementos > Estilos 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 que oferecem suporte às regras CSS @position-try.

Para saber mais, consulte Apresentação da API de posicionamento de âncora CSS.

Problema do Chromium: 40279608.

Melhorias no painel "Origens"

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

Configurar a formatação automática e o fechamento de chaves

Agora é possível ativar ou desativar a formatação automática e o fechamento de chaves para o Editor em Fontes. A formatação torna os arquivos minimizados legíveis. O fechamento automático de chaves adiciona uma chave de fechamento () ou }) ou uma tag (>) quando você digita uma de abertura.

Para configurar o comportamento relevante, marque ou desmarque as novas opções Fechar chaves automaticamente e Imprimir automaticamente fontes minificadas em Configurações > Preferências > Fontes.

Antes e depois de adicionar novas configurações para formatação automática e fechamento de chaves.

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 processou com .catch() ou .then() de dois argumentos.

Em outras palavras, quando Fontes > Pontos de interrupção > Pausar em exceções não capturadas está ativado, o depurador não pausa em instruções semelhantes a estas:

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

O antes e o depois reconhecendo rejeições capturadas.

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 dos erros ao capturar e gerar novamente os erros. À medida que o Console percorre a cadeia de causas, ele imprime cada pilha de erros com um prefixo Caused by: para que você ainda possa ver o erro original.

Os rastreamentos de pilha de impressão antes e depois com prefixos "Causado por".

Problema do Chromium: 40182832.

Melhorias no painel "Rede"

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

Inspecionar cabeçalhos de dicas iniciais

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

As dicas antecipadas 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.

Antes e depois de adicionar uma seção dedicada para dicas antecipadas.

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

Problema do Chromium: 40222701.

Ocultar a coluna "Diagrama de cascata"

Agora é possível ocultar a coluna Hierarquia no painel Rede da mesma forma que 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 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 permitir a captura de estatísticas do seletor de CSS em eventos 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.

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

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 retenções no painel "Memória"

Agora é possível ignorar retentores em snapshots de heap capturados com o painel Memória.

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

Antes e depois de adicionar uma opção para ignorar retenções.

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

Problema do Chromium: 327337527.

Lighthouse 11.7.1

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

Entre as mudanças notáveis, está o suporte descontinuado para o plug-in Publisher Ads, que ficou desatualizado nesta versão.

Antes e depois de adicionar e remover o suporte do plug-in Publisher Ads.

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 nesta versão:

  • O painel Gravador agora está oficialmente fora do status de visualização (329271496).
  • Agora, o Console 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 Fontes atualizou o destaque de sintaxe. Agora ele é compatível com as flags v e d em expressões regulares.
  • A guia Rede > Cookies corrigiu um bug com o mapeamento de cookies isentos para cookies de resposta (41491846).
  • Agora, a guia Elementos > Estilos faz o seguinte:
    • Mostra regras herdadas totalmente sobrecarregadas com propriedades personalizadas (41489874).
    • Destaca o valor aplicado em light-dark() dependendo do tema de cor (331123816).

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu 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 aos DevTools.

Novidades no DevTools

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