Esta página foi traduzida pela API Cloud Translation.

Novidades no DevTools, Chrome 128

Sofia Emelianova

Os insights do console do Gemini serão disponibilizados na maioria dos países europeus

Esta versão oferece suporte aos Insights do Console do Gemini para a maioria dos países europeus.

Lista de países europeus recém-aceitos

Alemanha, Áustria, Bélgica, Bulgária, Chipre, Croácia, Dinamarca, Espanha, Finlândia, França, Grécia, Hungria, Irlanda, Islândia, Itália, Liechtenstein, Lituânia, Luxemburgo, Letônia, Malta, Países Baixos, Noruega, Polônia, Portugal, Eslováquia, Suécia, Noruega, Polônia, Portugal, República Tcheca, Suécia e Suíça.

Se você está em um desses países, pode pedir insights ao Gemini diretamente no Console. Assim, é possível entender melhor os erros e avisos.

Um insight do Gemini para um erro no console.

Atualizações do Painel de desempenho

Essa atualização traz algumas melhorias no painel Desempenho.

Monitoramento de rede aprimorado

A faixa Rede no painel Desempenho foi aprimorada para mostrar informações críticas de forma antecipada para que você não precise alternar entre o painel Rede e Desempenho > guia Resumo, além de oferecer maior clareza sobre dicas visuais e cores. Além disso, se você ainda precisa alternar para o painel Rede, nós facilitamos e facilitamos esse processo para você.

A faixa Rede agora faz o seguinte:

Mostra uma legenda de cor para os tipos de solicitação.
Marca as solicitações de bloqueio de renderização com triângulos vermelhos no canto superior direito e mostra o iniciador da solicitação após a seleção com uma seta.
Ao passar o cursor, uma dica reformulada agora mostra informações estruturadas de tempo, incluindo mudanças na prioridade e bloqueio de renderização, se houver.
A guia Resumo agora também mostra um detalhamento dos tempos em uma coluna à direita.

O rastreamento de rede aprimorado com legenda colorida, dicas, indicadores de bloqueio de renderização e tempos na guia "Resumo".

Além disso, agora é possível clicar com o botão direito do mouse na solicitação na faixa ou no URL dela na guia Resumo e selecionar Revelar na rede no menu suspenso. O DevTools vai levar você ao painel Network e destacar a solicitação que você está procurando na tabela.

Personalizar dados de desempenho com a API de extensibilidade

Essa versão oferece suporte a dados de extensão no painel Performance. Agora é possível adicionar faixas personalizadas com eventos e descrições de dicas ao trace de desempenho, detalhes na guia Resumo e muito mais. Esse recurso pode ser útil para desenvolvedores de frameworks, bibliotecas e aplicativos complexos com instrumentação personalizada.

Confira um exemplo de faixa personalizada nesta página de demonstração. Em Desempenho > Configurações de captura e ative check_box Dados de extensão. Inicie uma gravação de apresentação, clique em Add new Corgi na página de demonstração e interrompa a gravação. Você verá uma faixa personalizada no trace contendo eventos com dicas e detalhes personalizados na guia Resumo.

Uma faixa personalizada no painel de desempenho.

Resumindo, para ampliar os dados de performance, transmita uma estrutura específica aos parâmetros measureOption.detail ou markOption.detail das chamadas de API performance.measure() ou performance.mark().

Detalhes na faixa "Tempos"

Se você é um desenvolvedor Web que usa a parte de velocidade do usuário da API Performance para adicionar entradas à faixa Timing, agora pode conferir seus detalhes arbitrários na guia Resumo para eventos mark e measure e os carimbos de data/hora deles.

Um evento personalizado na faixa "Tempos" com um carimbo de data/hora e detalhes.

Problema do Chromium: 345418915.

Copiar todas as solicitações listadas no painel Network

Em vez de copiar todo o registro de rede, agora o painel Rede permite aplicar filtros e copiar apenas as solicitações listadas.

Copiar opções apenas para solicitações listadas.

Instantâneos de heap mais rápidos com tags HTML nomeadas e menos confusão

Os snapshots de pilha no painel Memória ficam ainda mais rápidos, agora têm objetos agrupados por tags HTML nomeadas, correspondem melhor à semântica da linguagem JavaScript mostrando menos objetos internos e sempre incluem valores numéricos.

Objetos agrupados por tags HTML nomeadas.

O desempenho da configuração check_box Incluir valores numéricos na captura foi acelerado, ativado por padrão e removido do painel Memória.

Para incluir objetos internos manualmente no snapshot, ative as Configurações Configurações > Experimentos > check_box Mostrar opção para expor componentes internos em snapshots de heap, depois ativar check_box Expor internals (...) no painel Memória.

Problemas do Chromium: 41490040, 343341610, 42203857.

Abrir o painel "Animações" para capturar animações e editar `@keyframes` ao vivo

O painel Animations agora faz o seguinte:

Captura animações que já estão em andamento quando você abre o painel. Assim, você não precisa atualizar a página para capturar animações.
Compatível com a edição em tempo real do @keyframes. Em outras palavras, atualiza a animação capturada conforme você edita a seção @keyframes em Elementos > Estilos.

Confira esses dois recursos em ação no vídeo a seguir.

Problema do Chromium: 352718055.

Lighthouse 12.1.0

O painel Lighthouse agora executa o Lighthouse 12.1.0.

Essa atualização traz várias mudanças, incluindo a remoção da antiga métrica First Meaningful Paint (FMP) para a Largest Contentful Paint (LCP). Veja a lista completa de mudanças.

Para aprender os conceitos básicos do uso do painel Lighthouse no DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

Pressionar Tab após o preenchimento automático no campo de edição de expressões em tempo real move o foco para o próximo ponto de foco. Antes, o texto era recuado.
Clicar em um redimensionador coloca o foco nele, para que você possa movê-lo com as teclas de seta para a direita e para a esquerda.
Um leitor de tela agora anuncia que o campo de edição Add watch expression em Sources e Delete watch expression fica claramente visível ao navegar com um teclado.

Problemas do Chromium: 349939551, 343942719, 349334243, 349428374.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

Desempenho:
- Faixa Network: eventos de conexão WebSocket 331351979 adicionados.
- O painel Performance agora aumenta o zoom corretamente na atividade da linha de execução principal mais movimentada 345599356.
- Correção de um bug no upload de tipos incorretos de arquivos de rastreamento. Agora, impede o upload de qualquer tipo, exceto o .json ou .gz correto 349864878.
Elementos > Estilos:
- O menu suspenso de unidades nos valores da propriedade "length" foi descontinuado: 41495618.
- Foi corrigida a resolução das propriedades ativas para regras aninhadas de regras 346732737.
- As seções @position-try inativas agora estão esmaecidas 40246493.
Aplicativo:
- Cookies: foi corrigido um bug que não atualizava os cookies ao Atualizar, clicando em 348683488.
- Armazenamento local: agora é possível classificar por chaves em ordem alfabética 341129585.

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 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.
Informe um problema do DevTools usando Mais opções > Ajuda > Relate problemas no 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.