Novidades no DevTools, Chrome 131

Depurar o CSS com o Gemini

O Chrome DevTools recebe o novo painel experimental de assistência de IA, em que você pode conversar com o Gemini e receber ajuda para depurar seu CSS.

Faça o teste agora No painel Elementos, clique com o botão direito do mouse em um elemento e selecione Ask AI ou clique no botão correspondente ao lado do elemento. O DevTools vai abrir o novo painel de assistência de IA.

O novo painel vai pedir para você ativar a configuração correspondente. Verifique se você atende aos requisitos, ative a configuração e volte ao painel Assistência por IA. O elemento selecionado será usado como contexto. Digite sua pergunta sobre o elemento.

Para saber como usar o novo painel da melhor forma, consulte Cinco coisas legais para fazer com o assistente de IA do DevTools e a assistência de IA para criar estilos.

A equipe do DevTools está ansiosa para receber seu feedback. Deixe sua opinião em crbug.com/364805393.

Controlar os recursos de IA em uma guia de configurações dedicada

Agora é possível gerenciar todos os recursos de IA em um só lugar: as novas configurações Configurações > guia Inovações de IA. Ele lista considerações importantes, descreve os recursos de IA e permite que você os ative e desative individualmente.

Para mais informações, consulte Configurações > Inovações de IA.

Os insights do console estão a um clique de distância

O DevTools não precisa mais da ativação da sincronização de configurações para recursos de IA. Assim, os insights do console lançados anteriormente, junto com a assistência de IA para estilização, estão a um clique de distância.

Se você estiver conectado ao Chrome, ative esses recursos em Configurações > Inovações de IA.

Melhorias no painel de desempenho

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

Anotar e compartilhar os resultados de desempenho

O painel Desempenho tem a nova guia Anotações em uma barra lateral expansível à esquerda. Isso simplifica o processo de criação de notas para a análise detalhada de traces e a colaboração ao compartilhar descobertas de desempenho.

Agora é possível rotular e conectar eventos com setas e destacar períodos diretamente no rastreamento. Depois, você pode salvar, compartilhar e fazer upload de rastros anotados no painel Performance.

Receba insights de desempenho diretamente no painel de desempenho

Agora você pode descobrir insights úteis na nova guia Insights no painel esquerdo do painel Performance. Os insights são consolidados do relatório do Lighthouse e do painel Insights de desempenho, que está prestes a ser descontinuado.

A guia Insights tem como objetivo fornecer análises guiadas e sugerir insights úteis sobre problemas de desempenho que podem deixar seu site mais lento. Para usar os insights, abra a guia na barra lateral esquerda do painel Performance, expanda as diferentes categorias e passe o cursor e clique nos itens. O painel Performance vai destacar os eventos correspondentes no rastro.

A equipe do DevTools aguarda seu feedback sobre a utilidade dos insights, formas de melhorá-los e sua experiência com o uso dessas ferramentas com outras ferramentas, como o PageSpeed Insights e o Lighthouse. Deixe seu feedback em crbug.com/371170842.

Identifique mudanças excessivas de layout com mais facilidade

A faixa Layout shifts está de cara nova. As trocas de layout agora são marcadas com diamantes roxos (mais visíveis) e são agrupadas em clusters com base na proximidade delas na linha do tempo. Tanto os turnos quanto os clusters recebem uma tabela organizada com horários, pontuações, elementos e possíveis causas na guia Resumo.

Além disso, a visualização de métricas em tempo real recebe o registro de mudanças de layout com pontuações e elementos ao lado da guia Interações.

Problema do Chromium: 369100729.

Identificar animações não compostas

A faixa Animações agora mostra informações úteis sobre animações não compostas:

• Nomeia as animações de acordo com a propriedade CSS correspondente, se houver.
• Marca animações não compostas com triângulos vermelhos na faixa.
• Mostra o motivo da falha de composição na guia Resumo.

Para mais informações, consulte Usar somente propriedades do compositor e gerenciar o número de camadas.

Problema do Chromium: 41006273.

A simultaneidade de hardware vai para os sensores

A configuração Concorrência de hardware foi movida do painel Performance para um lugar mais apropriado: o painel Sensores.

Problema do Chromium: 371463665.

Ignorar scripts anônimos e focar seu código nos stack traces

Os rastreamentos de pilha no Console agora detectam, ignoram, recolhem e, se expandidos, os frames esmaecidos provenientes de arquivos na lista de ignorados. Antes, o nome da função não era esmaecido no trace expandido.

Você também pode ativar as novas configurações Configurações > Lista de ignorados > check_box Scripts anônimos do eval ou console para definir que as Ferramentas do desenvolvedor ignorem scripts anônimos sem URL de origem.

Além disso, quando você clica com o botão direito do mouse e em Salvar como... no registro do console, o texto Mostrar mais/menos não é salvo.

Problemas do Chromium: 40279542, 40945570, 345248263.

Elementos > Estilos: suporte a modos de gravação sideways-* para sobreposições de grade e palavras-chave em todo o CSS

A guia Elementos > Estilo agora oferece suporte para:

• A sobreposição de grade na janela de visualização agora mostra grades para os modos de escrita sideways-rl e sideways-lr.
• Resolve palavras-chave em todo o CSS. Na prática, isso significa que, por exemplo, se inherit for uma cor, a guia Styles vai mostrar um seletor de cores ao lado dela.

Problemas do Chromium: 40280717, 40706051, 40501131.

Auditorias do Lighthouse para páginas que não são HTTP nos modos de período e resumo

O Lighthouse agora pode gerar relatórios para páginas que não são HTTP nos modos de período e de snapshot.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

• Em Sources > Editor, agora é possível fechar guias com arquivos abertos focando no botão X e pressionando Enter ou espaço.
• Na guia Performance, agora é possível selecionar uma entrada no trace e pressionar Espaço para abrir o menu de contexto.
• Em Desempenho, a guia Insights na barra lateral à esquerda pode ser acessada pelo teclado e acessada por guias.

Problema do Chromium: 372411090.

Destaques diversos

Estas são algumas correções e melhorias importantes feitas nesta versão:

• As configurações de limitação agora são sincronizadas corretamente entre os painéis Performance e Rede (370332090).
• Aplicativo > Serviços em segundo plano > Cargas especulativas > Regras agora tem um botão de impressão {} semelhante a Origens > Editor (40279147).
• Expressões ao vivo: pressionar Tab após selecionar uma opção de preenchimento automático agora sai do campo de edição em vez de recuar o texto (349939551).
• Elementos > Estilos: anchor() e anchor-size() oferecem suporte a uma nova sintaxe em que é possível reordenar argumentos e omitir a direção anchor-size() (343516786). Além disso, a renderização de substituto foi corrigida (365802559).
• Rede: correção de visualizações de GraphQL (369931288).
• Performance: agora informa o progresso incremental do carregamento e do processamento de rastros.
• WebAuthn: agora atualiza dinamicamente as credenciais modificadas por métodos signal* (368467199).
• WebAssembly: um aviso no Console agora informa se há vários símbolos de depuração disponíveis para um módulo WebAssembly e qual deles está em uso (40879198, 369515221).
• A sobreposição de Core Web Vitals foi removida da guia Renderização 328487897.
• Os recursos de IA generativa agora não exigem a sincronização das configurações do Chrome.

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 novos recursos, atualizações ou qualquer outro item relacionado ao DevTools.

• Envie feedback e solicitações de recursos em crbug.com.
• Para informar um problema do DevTools, use more_vert em Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos de Novidades do DevTools no YouTube ou de dicas do DevTools no YouTube.

Novidades no DevTools

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