Novidades no DevTools, Chrome 129

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

Como parte do suporte ao WebDriver BiDi, o painel Recorder agora pode exportar gravações para o Puppeteer para Firefox. Com a compatibilidade do Puppeteer com 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.

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. 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 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 da métrica para ver uma dica com mais informações.

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.

Solicitações de pesquisa na faixa "Rede"

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

Conferir rastros de pilha 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. Você pode usar essas chamadas para estender o rastro 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 a 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 arquivado na página e selecione uma das opções no menu Ferramentas do desenvolvedor.

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çosamente. 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.

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.

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

Lighthouse 12.2.0

O painel Lighthouse agora executa o Lighthouse 12.2.0.

Esta 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

Confira algumas correções e melhorias importantes desta 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.
  • 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.
• Performance > Rede: a opção de menu Revelar na rede agora abre a guia Cabeçalhos da solicitação de rede relevante.
• Console:
  • Erros da extensão C/C++ agora não abrem o console 356320158 à força.
  • Correção de um bug com import.meta em um módulo JS que não avaliava quando pausado 40743793.
• 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 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.

• Envie feedback e solicitações de recursos para crbug.com.
• Informe um problema do DevTools usando a opção more_vert Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.

Novidades no DevTools

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