Novidades no DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

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 com suporte recente

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

Se você estiver em um desses países, agora pode pedir ao Gemini para fornecer insights diretamente no console para 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 Performance foi aprimorada para mostrar informações importantes de antemão, por exemplo, duração mais detalhada e árvore de iniciadores de rede, e para fornecer maior clareza sobre as indicações visuais e as cores. Assim, você não precisa mais alternar entre o painel Rede e a guia Performance > Resumo. Além disso, se você ainda precisar mudar para o painel Rede, facilitamos e aceleramos o processo.

A faixa Rede agora faz o seguinte:

  • Mostra uma legenda de cores para os tipos de solicitação.
  • Marca solicitações de bloqueio de renderização com triângulos vermelhos no canto superior direito.
  • Mostra o iniciador da solicitação após a seleção com uma seta. Isso ajuda a entender a árvore de iniciadores de rede, que antes só estava disponível no painel Rede.
  • Ao passar o cursor, uma dica reformulada agora mostra informações de tempo estruturadas, incluindo o status de bloqueio de renderização e mudanças na prioridade, 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 você pode clicar com o botão direito do mouse na solicitação na faixa ou no URL dela na guia Resumo e selecionar Revelar no painel de rede no menu suspenso. O DevTools vai levar você ao painel Network e destacar a solicitação que você está procurando na tabela.

Menu de contexto da solicitação com a opção "Revelar no painel de rede".

Personalizar dados de desempenho com a API de extensibilidade

Esta versão traz suporte a dados de extensão para o 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 uma faixa personalizada nesta página de demonstração. Em Desempenho > Configurações de captura, ative Dados de extensão. Inicie uma gravação de performance, clique em Adicionar novo 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.

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

Detalhes em "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 de rede

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

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

Snapshots de heap mais rápidos com tags HTML nomeadas e menos desordem

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 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 Configurações > Experimentos > Mostrar opção para expor elementos internos em snapshots de heap e ative Expor componentes internos (...) 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 Animações agora faz o seguinte:

  • Captura animações que já estão em andamento quando você abre o painel, para que não seja necessário 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). Confira 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 depois do 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.
  • Agora, um leitor de tela anuncia o campo de edição Adicionar expressão de relógio em Origens, e Excluir expressão de relógio agora está claramente visível ao navegar com um teclado.

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

Destaques diversos

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

  • Performance:
    • 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 com o upload de tipos de arquivo de rastreamento errados. Agora, o upload de qualquer tipo, exceto .json ou .gz corretos, é impedido 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.
  • Aplicação:
    • Cookies: foi corrigido um bug que não atualizava os cookies ao Atualizar, clicando em 348683488.
    • Armazenamento local: agora é possível classificar as chaves em ordem alfabética 341129585.

Fazer o download dos canais de visualização

Considere usar o Chrome Canary, Dev ou Beta como seu 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.