Novidades no DevTools, Chrome 128

Sofia Emelianova
Sofia Emelianova
GitHub

Os insights do console do Gemini vão ser lançados na maioria dos países europeus

Esta versão oferece suporte aos insights do console do Gemini na 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, Lituânia, Luxemburgo, Malta, Noruega, Países Baixos, Polônia, Portugal, República Tcheca, Romênia, Suécia, Suíça e Reino Unido

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 sobre um erro no console.

Atualizações do painel de desempenho

Esta atualização traz algumas melhorias ao painel Performance.

Faixa Enhanced Network

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, não é mais necessário 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 de ferramenta reformulada agora mostra informações estruturadas sobre o tempo, 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.

A faixa de rede aprimorada com uma legenda de cores, dicas de ferramentas, 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 performance com a API de extensibilidade

Esta versão oferece suporte a dados de extensões no painel Performance. Agora é possível adicionar faixas personalizadas com eventos e descrições de dicas ao rastro de performance, detalhes à 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 Performance > Configurações de captura, ative a Extension data. Inicie uma gravação de performance, clique em Adicionar novo Corgi na página de demonstração e interrompa a gravação. Uma faixa personalizada vai aparecer no rastreamento, contendo eventos com dicas de ferramentas e detalhes personalizados na guia Resumo.

Uma faixa personalizada no painel "Performance".

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 na faixa "Tempos"

Se você é um desenvolvedor da Web que usa a parte de Temporização do usuário da API Performance para adicionar entradas à faixa Tempos, agora é possível conferir 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 ficaram ainda mais rápidos, agora têm objetos agrupados por tags HTML nomeadas, correspondem melhor à semântica do idioma 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 primeiro Settings > Experiments > Show option to expose internals in heap snapshots e depois ative Expose internals (...) no painel Memory.

Problemas do Chromium: 41490040, 343341610, 42203857.

Abra 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.
  • Oferece suporte à edição em tempo real de @keyframes. Em outras palavras, atualiza a animação capturada conforme você edita a seção @keyframes em Elements > Styles.

Confira como os dois recursos funcionam 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 "Primeira exibição significativa" (FMP) em favor da Maior exibição de conteúdo (LCP). Consulte a lista completa de mudanças.

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

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

  • Pressione Tab após a conclusão automática no campo de edição de expressões ao vivo para mover o foco para o próximo ponto de foco. Antes, ele recuava o texto.
  • Clicar em um redimensionador coloca o foco nele, para que você possa movê-lo com as teclas de seta para a direita e 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:
    • Trilha Rede: foram adicionados eventos de conexão WebSocket 331351979.
    • O painel Performance agora amplia corretamente a 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 de propriedade de comprimento foi descontinuado 41495618.
    • Correção da resolução de propriedades ativas para regras at aninhadas 346732737.
    • As seções @position-try inativas agora aparecem esmaecidas 40246493.
  • Aplicação:
    • Cookies: corrigimos um bug que não atualizava os cookies ao clicar em Atualizar 348683488.
    • Armazenamento local: agora é possível classificar as chaves em ordem alfabética 341129585.

Fazer o download dos canais de visualização

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