Novidades no DevTools, Chrome 131

Depurar 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 Perguntar à IA 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. Ele vai usar o elemento selecionado como contexto. Digite sua pergunta sobre o elemento.

Para saber mais sobre como usar melhor o novo painel, consulte Cinco coisas legais para fazer com a assistência de IA do DevTools e confira a assistência de IA para estilização.

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 você pode 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 Performance recebe a nova guia Anotações em uma barra lateral expansível à esquerda que simplifica o processo de criação de anotações para a análise de rastros e a colaboração ao compartilhar descobertas de desempenho.

Agora você pode rotular e conectar eventos com setas e destacar intervalos de tempo diretamente no rastro. Depois, você pode salvar, compartilhar e fazer upload de rastros anotados no painel Performance.

Receber insights de desempenho no painel "Performance"

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 espera seu feedback sobre a utilidade dos insights, maneiras de melhorar e sua experiência ao usá-los com outras ferramentas, como o PageSpeed Insights e o Lighthouse. Deixe seu feedback em crbug.com/371170842.

Identifique mudanças excessivas no layout com mais facilidade

A faixa Mudanças de layout está com uma aparência nova. As mudanças de layout agora são marcadas com diamantes roxos (mais visíveis) e agrupadas com base na proximidade 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 ao vivo 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 é movida do painel Performance para um lugar mais apropriado: o painel Sensores.

Problema do Chromium: 371463665.

Ignorar scripts anônimos e se concentrar no código em stack traces

Os Stack Traces no Console agora detectam, ignoram, ocultam e, se expandidos, esmaecem frames que vêm de arquivos ignorados. Anteriormente, o nome da função não ficava esmaecido no rastro aberto.

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 Salva como... o registro do console, o texto Mostrar mais/menos não é salvo.

Problemas do Chromium: 40279542, 40945570, 345248263.

Elementos > Estilos: suporte aos 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 viewport 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 snapshot.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

• Em Sources > Editor, as guias com arquivos abertos agora podem ser fechadas ao focar no botão X e pressionar Enter ou Space.
• Na guia Performance, agora é possível selecionar uma entrada no trace e pressionar Espaço para abrir o menu de contexto.
• Em Performance, a guia Insights na barra lateral à esquerda pode ser acessada pelo teclado e pode ser "navegada".

Problema do Chromium: 372411090.

Destaques diversos

Confira algumas correções e melhorias importantes desta 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() são compatíveis com a nova sintaxe, em que é possível reordenar argumentos e omitir a direção anchor-size() (343516786). Além disso, corrigimos a renderização de substituto (365802559).
• Rede: correções nas visualizações do 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: agora, um aviso no Console informa se vários símbolos de depuração estão disponíveis para um módulo do 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 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.