Novidades no DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

O Recorder oferece suporte à exportação para o Puppeteer no Firefox

Como parte do suporte ao WebDriver BiDi, o painel Recorder agora pode exportar gravações para o Puppeteer para Firefox. Com o suporte do Puppeteer para o Firefox, agora é possível gravar fluxos de usuários usando o painel Recorder do Chrome DevTools, exportá-los e executá-los no Firefox e no Chrome.

O antes e depois de adicionar a opção "Puppeteer para Firefox" ao menu de exportação do Gravador.

Para mais informações, consulte WebDriver BiDi - O futuro da automação entre navegadores (em inglês).

Melhorias no painel de desempenho

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

Observações de métricas em tempo real

O painel Performance agora mostra observações em tempo real sobre as Core Web Vitals, tanto na sua máquina local quanto com base nos dados de campo do Chrome UX Report. Assim, você pode identificar problemas de desempenho sem precisar capturar rastros de desempenho e entender como sua experiência é representativa em comparação com a dos usuários.

Para ver observações em tempo real na LCP e na CLS, abra o painel Desempenho. Para conferir a INP, faça uma interação em uma página. Para comparar suas métricas locais com a experiência do usuário agregada do Chrome UX Report, adicione dados dos campos: na seção Dados de campo à direita, clique em Configurar e, na janela de diálogo, clique em Ok. Passe o cursor sobre um valor da métrica para ver uma dica com mais informações.

Observações em tempo real sobre métricas no painel de desempenho.

O painel Performance destaca as métricas que podem ser melhoradas e oferece insights e sugestões sobre como igualar sua experiência local à dos usuários. Por exemplo, você pode limitar a CPU ou a rede. Para isso, basta acessar a mesma tela na seção Configurações de gravação à direita.

A caixa Pesquisa no painel Desempenho agora também funciona na faixa Rede, para que você possa encontrar solicitações com o atalho Ctrl / Cmd + F.

Uma solicitação de rede encontrada com a pesquisa.

Conferir stack traces de chamadas performance.mark e performance.measure

Na guia Summary, o painel Performance agora mostra rastros de pilha de chamadas performance.mark e performance.measure. Essas chamadas podem ser usadas para estender o rastreamento de desempenho com seus dados personalizados.

O antes e o depois mostrando os rastros de pilha para chamadas performance.mark e performance.measure.

Para mais informações, consulte Personalizar seus dados de desempenho com a API de extensibilidade.

Usar dados de endereço de teste no painel "Preenchimento automático"

O painel Preenchimento automático agora fornece dados de teste para formulários de endereço. Isso facilita o teste dos formulários de endereço no seu site quando você não tem nenhum endereço salvo no Chrome ou está usando um perfil de visitante.

Para preencher automaticamente formulários de endereço com dados de teste, abra o painel Preenchimento automático, ative a Mostrar endereços de teste no menu de preenchimento automático, clique com o botão direito do mouse em um formulário de endereço na página e selecione uma das opções no menu Ferramentas do desenvolvedor.

O antes e depois de adicionar opções de dados de teste de preenchimento automático a um menu suspenso de campo de formulário de endereço.

Melhorias no painel "Elementos"

Essa versão traz algumas melhorias para o painel Elementos.

Forçar mais estados para elementos específicos

A seção :hov em Elementos > Estilos agora oferece mais pseudoclasses que podem ser ativadas à força. O novo conjunto de opções está no menu suspenso de estado Forçar elemento específico e é específico para determinados elementos selecionados. Por exemplo, <label> e <input> têm conjuntos diferentes de opções.

Antes e depois de adicionar a capacidade de forçar estados específicos de elementos.

Problema do Chromium: 40280012.

Elementos > Estilos agora preenche automaticamente mais propriedades de grade

A guia Elements > Styles agora oferece opções de preenchimento automático ao editar a área da grade e os nomes das linhas.

O antes e o depois de adicionar opções de preenchimento automático ao editar nomes de linhas de grade.

Para mais informações, consulte Inspecionar layouts de grade CSS e a seção Mostrar nomes de linhas especificamente.

Lighthouse 12.2.0

O painel Lighthouse agora executa o Lighthouse 12.2.0.

Essa atualização traz várias correções de bugs. 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.

Destaques diversos

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

  • Elementos:
    • Correção de um bug com renderização incorreta de propriedades de comprimento sobrecarregadas 357020613.
    • position-try-options foi renomeado como position-try-fallbacks, de acordo com a especificação (link em inglês).
    • A atualização da página agora restaura o nó selecionado mesmo dentro de um iframe 40719145.
    • Acessibilidade: os leitores de tela agora vão anunciar o botão Mostrar elemento 357382536.
  • Desempenho > Rede: a opção de menu Revelar na rede agora abre a guia Cabeçalhos da solicitação de rede relevante.
  • Console:
    • Os erros da extensão C/C++ agora não forçam a abertura do Console 356320158.
    • Correção de um bug com import.meta em um módulo JS que não avaliava 40743793 quando pausado.
  • Memória: correção de um bug em que as retenções ignoradas não apareciam após a ignorância de uma retenção 327337527.

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de pré-lançamento dão acesso aos recursos mais recentes do DevTools, permitem testar APIs modernas da plataforma da Web e ajudam a encontrar problemas no site antes que os usuários o façam!

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades no DevTools.