Novidades do DevTools, Chrome 139

Sofia Emelianova

Um Chrome DevTools mais confiável e produtivo

Nesta versão, o Chrome DevTools priorizou a excelência do produto. Isso envolveu lidar com uma ampla variedade de problemas conhecidos, desde falhas visuais de longa data, problemas de usabilidade e inconsistências no design até problemas de desempenho e funcionais. No geral, reduzimos o número de problemas em aberto em 27%.

Resolvemos alguns problemas antigos, mas também fizemos melhorias em recursos mais recentes, como o painel Performance e a assistência de IA. O resultado é uma experiência de desenvolvimento significativamente melhorada em todos os aspectos.

Nos bastidores, fizemos um grande esforço para aumentar a cobertura de testes, investigamos falhas complexas, migramos testes para bases mais robustas e resolvemos bugs descobertos ao longo do caminho. Conseguimos reduzir o número de problemas relacionados a testes em 54%.

Esperamos que você perceba essas várias correções e refinamentos sutis em vários painéis, tornando seus fluxos de trabalho diários de depuração e desenvolvimento mais tranquilos, confiáveis e produtivos.

Fazer upload de imagens na assistência de IA para estilização

Para dar mais contexto visual aos seus comandos, agora você pode não apenas fazer capturas de tela automáticas, mas também enviar imagens arbitrárias para suas conversas com o Gemini no painel Assistência de IA.

Comece a conversa no painel Elementos. Para isso, selecione um elemento DOM e clique em Perguntar à IA. Assim, o elemento será especificado como contexto da conversa. Em seguida, clique em add_photo_alternate Adicionar imagem no campo de entrada.

Adicionar cabeçalhos de solicitação à tabela em "Rede"

No painel Rede, agora é possível clicar com o botão direito do mouse em um nome de coluna na tabela de solicitações e selecionar vários cabeçalhos para adicioná-los como colunas.

Problema do Chromium: 397481040.

Confira os destaques do Google I/O 2025

Se ainda não fez isso, teste os novos recursos principais do Chrome DevTools destacados no Google I/O 2025, incluindo, entre outros:

• Fontes: conecte uma pasta do espaço de trabalho e salve as mudanças nos arquivos de origem.
• Com tecnologia do Gemini:
  • Modifique e salve as mudanças de CSS no seu espaço de trabalho.
  • Perguntar sobre insights de performance.
  • Anotar automaticamente as descobertas de performance.
  • Adicionar capturas de tela aos seus chats de IA.

Além disso, confira os novos Insights de performance: JavaScript duplicado e JavaScript legado.

Destaques diversos

Confira algumas das várias correções e melhorias importantes desta versão:

• Aplicativo: agora há uma caixa de diálogo de confirmação para limpar os armazenamentos de objetos IndexedDB porque é uma ação irreversível (crbug.com/326987147).
• Origens: os pontos de registro e os selos de ponto de interrupção condicional ao lado das linhas de código agora mostram uma dica ao passar o cursor com a mensagem ou condição de registro correspondente (crbug.com/40266230).

• Performance:

  • O insight Causadores da troca de layout agora mostra links para imagens sem tamanho (crbug.com/416449602).
  • O insight Descoberta de solicitações de LCP agora mostra o atraso no carregamento da imagem após o ponto de partida mais antigo.
  • Limitação: corrigimos o formato desatualizado das configurações de limitação que alguns usuários tinham armazenado localmente.
  • Registro de eventos: a filtragem ficou mais rápida (crbug.com/40783421).

• Animações: capturas de tela de visualização descontinuadas porque o clique para visualizar um grupo de animações oferece uma experiência semelhante e melhor (crbug.com/330179643).

• Acessibilidade:

  • Adicionamos rótulos aria à barra lateral Fontes > Pontos de interrupção do DOM, quando presente.
  • Corrigida a navegação pelo teclado Shift + Tab no campo de texto Expressão dinâmica no Console (crbug.com/408398435, crbug.com/420344137).
  • As Configurações agora oferecem suporte a atalhos de zoom in/out/redefinição: Cmd/Ctrl + +/-/0 (crbug.com/41484555).
  • Elementos > Estilos: ícones de dica e aviso do CSS (crbug.com/40706851) e Relógio de ângulo agora podem ser focados com o teclado (crbug.com/401212624, crbug.com/401213524).

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

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.