Novidades do Chrome 137 para as DevTools

Edição do Google I/O 2025

O Chrome DevTools terá uma forte presença no Google I/O deste ano. Haverá uma mistura de sessões gravadas e ao vivo.

Para saber mais sobre os novos recursos, acompanhe o seguinte:

• Novidades do Chrome, 20 de maio de 2025 | 15h30 (horário do Pacífico)
• Faça mais com o Chrome DevTools e menos CTRL + TAB
• Depuração de performance no DevTools

Além disso, não se esqueça de assistir à sessão O que há de novo na Web de Rachel Andrew, em 20 de maio de 2025, às 16h30 (horário do Pacífico).

Confira nosso vídeo mais recente para uma visão geral rápida dos nossos destaques:

Modificar e salvar mudanças de CSS no seu espaço de trabalho com o Gemini

Com alguns cliques, o Gemini pode modificar e corrigir o CSS para você e, com uma pasta de espaço de trabalho conectada, salvar as mudanças de volta nos arquivos de origem do seu computador.

Os espaços de trabalho automáticos são um recurso experimental. Você pode conectar sua pasta de origem atual ou testar uma demonstração.

Com uma pasta do espaço de trabalho conectada, no painel Elementos, clique em Perguntar à IA, peça ao Gemini para modificar o CSS, clique em Continuar para testar as mudanças ao vivo, expanda Mudanças não salvas, clique em Aplicar ao espaço de trabalho, revise a diferença e clique em Salvar tudo.

Conectar uma pasta do espaço de trabalho e salvar as mudanças nos arquivos de origem

Agora é possível conectar automaticamente (ou manualmente) uma pasta do espaço de trabalho para permitir que o DevTools salve as mudanças de JavaScript, HTML e CSS nos arquivos de origem armazenados no seu computador.

Confira como funciona com JavaScript:

Problema do Chromium: 404170628.

Perguntar ao Gemini sobre insights de performance

Com um clique de um botão, você pode iniciar uma conversa com o Gemini para investigar e agir com base nas seguintes informações de performance:

• LCP por fase
• Descoberta de solicitações de LCP
• Solicitações de bloqueio de renderização
• Causas da troca de layout
• Latência da solicitação de documentos

Deixe seu feedback sobre o recurso em crbug.com/371170842.

Anotar descobertas de performance com o Gemini

Agora você pode pedir para o Gemini gerar anotações sobre eventos no rastreamento de desempenho.

Clique duas vezes em um evento na faixa Principal e clique em Gerar rótulo ao lado do campo de entrada. O Gemini pode sugerir um rótulo com base no rastreamento de pilha e no contexto.

Adicionar capturas de tela às suas conversas com o Gemini

No painel Assistência de IA, agora é possível clicar no botão photo_camera Fazer captura de tela para capturar a tela da página e enviar para a conversa com o Gemini.

Você pode usar capturas de tela para fornecer contexto visual adicional aos comandos, por exemplo, para verificar se todos os botões visíveis têm o mesmo espaçamento.

Novos insights no painel "Desempenho"

Esta versão traz dois novos insights para o painel Performance: JavaScript duplicado e JavaScript legado.

JavaScript duplicado

A nova opção Performance > Insights > JavaScript duplicado vai destacar na faixa Rede as solicitações de módulos JavaScript grandes e duplicados nos seus pacotes, se eles estiverem presentes na página.

Você também pode clicar em Ver mapa de árvore no insight para analisar as dependências do JavaScript.

JavaScript legado

A nova seção Performance > Insights > JavaScript legado vai destacar na faixa Rede as solicitações de JavaScript legado, se presentes na sua página. Por exemplo, polyfills e transformações que permitem que navegadores mais antigos usem novos recursos do JavaScript. No entanto, muitos não são necessários para navegadores modernos.

As especulações agora oferecem suporte a tags de regra

Agora, Application > Speculative loads mostra tags em vez de URLs para conjuntos de regras, se houver tags.

Problema do Chromium: 393408589.

Lighthouse 12.6.0

O painel Lighthouse agora executa o Lighthouse 12.6.0.

A principal mudança nesta versão é que o Lighthouse está migrando para auditorias de insights de performance. Na categoria Performance do relatório do Lighthouse, agora é possível Testar insights.

Consulte também 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: 40543651.

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Rede: adicionamos a análise de formatos conhecidos de tempos de servidor.
• Agora é possível desmarcar linhas em tabelas com Cmd/Ctrl + clique (problema do Chromium: 409474445).
• Performance > Insights > Use tempos de vida do cache eficientes agora ignora recursos com TTL igual ou superior a 30 dias.

Acessibilidade

Esta versão traz as seguintes melhorias de acessibilidade:

• Performance: as setas de iniciador no rastreamento agora estão mais visíveis.
• Elementos: agora é possível ativar/desativar a visualização em árvore de acessibilidade de página inteira com o atalho A (problema do Chromium: 40888478).

• Agora, os leitores de tela anunciam, entre outras coisas:

  • "Copiado para a área de transferência" ao copiar de blocos de código.
  • "Aplicando ao espaço de trabalho" quando você aplica mudanças ao espaço de trabalho no chat da assistência de IA.
  • "Gerando rótulo" quando você pede para a IA gerar um em Performance > Anotações.
  • Há comandos sugeridos no chat da assistência de IA.
  • Leia as economias estimadas para insights relevantes em Performance > Insights.

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 O que há de novo no DevTools.