Novidades no DevTools, Chrome 129

O Gravador agora é compatível com a exportação para o Puppeteer para 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.

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.

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, talvez você queira limitar a CPU ou a rede, o que pode ser feito na mesma tela, na seção Configurações de gravação à direita.

Pesquisar solicitações na faixa de rede

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.

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.

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 check_box 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.

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.

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.

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 o básico sobre como usar o 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.
  • Agora, uma atualização de página 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 ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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