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

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

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

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

Suporte a regras @position-try em Elementos > Estilos

Para ajudar a depurar o posicionamento de âncoras de CSS, a guia Elementos > Estilos agora é compatível com as regras de CSS @position-try. A guia resolve valores 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 de CSS @position-try.

Para saber mais, consulte Vincular elementos entre si com o posicionamento de âncoras de CSS.

Problema do Chromium: 40279608.

Melhorias no painel "Origens"

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

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

Agora você pode ativar ou desativar a formatação automática e o fechamento de colchetes do Editor em Sources. A opção Pretty-printing torna os arquivos reduzidos legíveis. O fechamento de colchetes adiciona automaticamente um parêntese de fechamento () ou }) ou tag (>) quando você digita uma de abertura.

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

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

Problemas do Chromium: 40865010, 324314570.

As promessas recusadas tratadas são reconhecidas como detectadas.

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 Sources > Breakpoints > check_box Pause on uncaughtExceptions estiver ativada, o depurador não pausará em instruções semelhantes às seguintes:

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 de erros ao detectar e gerar erros novamente. À medida que o Console percorre a cadeia da causa, ele mostra cada pilha de erros com um prefixo Caused by: para que você ainda possa conferir o erro original.

O antes e depois da impressão de stack traces com prefixos "Causado por".

Problema do Chromium: 40182832.

Melhorias no painel Network

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

Inspecionar cabeçalhos de Early Hints

Os cabeçalhos "Dicas iniciais" têm uma seção dedicada na guia Cabeçalhos da solicitação do painel Rede. Antes os cabeçalhos relevantes ficavam 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 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 depois da adição de uma seção dedicada para Early Hints.

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 Waterfall no painel Network da mesma forma que você pode ocultar 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 Waterfall 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 tem uma nova configuração que permite capturar estatísticas do seletor de CSS para eventos Recalcular estilo de longa duração.

Para conferir 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 de correspondência e o número de contagens, além da porcentagem de não correspondências em 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 tem um novo modo de configuração que permite alterar a ordem das faixas e ocultá-las.

Para acessar o modo de configuração, clique no botão Editar à esquerda do nome da faixa. Em seguida, clique em arrow_upward para cima ou arrow_downward para mover a faixa ou clique em visibilidade_off para ocultar. Clique no botão Concluído Verificar à 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 retenções 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. 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ção na parte superior.

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

Além disso, os snapshots de heap agora oferecem suporte a um número maior (centenas de milhões) de nós e bordas 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 importantes estão o suporte descontinuado para o plug-in Anúncios do editor, que ficou desatualizado nesta versão.

O antes e o depois da adição da remoção do suporte ao plug-in dos 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 nesta versão:

  • O painel Gravador agora está oficialmente sem 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 painel Sources atualizou o marcador de sintaxe. Agora, ele oferece suporte às sinalizações v e d em expressão regular.
  • 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 cor (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 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 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