Novidades no DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

O gravador permite exportar para o Puppeteer no Firefox

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

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.

Melhorias no painel de desempenho

Esta versão traz várias melhorias ao painel Performance.

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. Isso permite identificar problemas de desempenho sem precisar capturar rastreamentos de desempenho e entender o quanto sua experiência é representativa em comparação com a dos usuários.

Para conferir observações em tempo real sobre LCP e CLS, abra o painel Performance. 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 de campo: 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 de métrica para ver uma dica com mais informações.

Observações em tempo real sobre as métricas no painel "Performance".

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

A caixa Pesquisar no painel Performance agora também funciona na faixa Rede. Assim, você pode encontrar solicitações com o atalho Ctrl / Cmd + F.

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

Conferir rastreamentos de pilha de chamadas performance.mark e performance.measure

Na guia Resumo, o painel Performance agora mostra rastreamentos de pilha de chamadas performance.mark e performance.measure. Você pode usar essas chamadas para estender o rastreamento de performance com seus dados personalizados.

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

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

Usar dados de endereço de teste no painel de 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 endereços salvos 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 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 preenchido na sua página e selecione uma das opções no menu Ferramentas para desenvolvedores.

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"

Esta versão traz algumas melhorias ao 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 Forçar elemento específico e é específico para determinados elementos selecionados. Por exemplo, <label> e <input> têm conjuntos de opções diferentes.

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

Problema do Chromium: 40280012.

Elementos > Estilos agora preenchem automaticamente mais propriedades de grade

A guia Elementos > Estilos 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, em particular, a seção Mostrar nomes de linha.

Lighthouse 12.2.0

O painel Lighthouse agora executa o Lighthouse 12.2.0.

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

Confira algumas correções e melhorias importantes 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.
    • Uma atualização de página agora restaura o nó selecionado, mesmo dentro de um iframe 40719145.
    • Acessibilidade: os leitores de tela agora anunciam o botão Mostrar elemento 357382536.
  • Performance > Rede: a opção de menu Mostrar na rede agora abre a guia Cabeçalhos da solicitação de rede relevante.
  • Console:
    • Agora, os erros da extensão C/C++ não abrem à força o Console 356320158.
    • Correção de um bug com import.meta em um módulo JS que não era avaliado quando pausado 40743793.
  • Memória: correção de um bug em que a opção "Restaurar retenções ignoradas" não aparecia depois de ignorar uma retenção 327337527.

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu 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 os novos recursos, atualizações ou qualquer outra coisa relacionada aos DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.