Esta página foi traduzida pela API Cloud Translation.

Novidades do DevTools e do Chrome 125

Sofia Emelianova

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 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 a regras `@position-try` em Elementos > Estilos

Para ajudar você a depurar o posicionamento de âncoras de CSS, a guia Elementos > Estilos agora oferece suporte a regras de 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, os cabeçalhos relevantes estavam 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 destaque de sintaxe atualizado do painel Sources foi especificamente compatível com as sinalizações v e d na 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 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é-visualização 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.
Para informar um problema do DevTools, use Mais opções > Ajuda > Informar problemas do 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.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Visualizar métricas de desempenho no painel "Desempenho"
Destacar nós de texto na árvore do DOM
Copiar o caminho do JS para um nó do DOM
Atualizações do painel de auditorias, incluindo uma nova auditoria que detecta bibliotecas JS e novas palavras-chave para acessar o painel "Auditorias" no menu de comando.
Dica bônus: use o Modo dispositivo para inspecionar consultas de mídia (vídeo)