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.

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. As Ferramentas para desenvolvedores vão abrir o novo painel Assistência de IA.

O novo painel vai pedir para você ativar a configuração correspondente. Verifique se você atende aos requisitos, ative a opção e volte ao painel Assistência de 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 5 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 aguarda seu feedback. Deixe seu feedback 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: a nova guia Configurações Configurações > Inovações de IA. Ele lista considerações importantes, descreve os recursos de IA e permite ativar e desativar cada um deles.

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

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

O DevTools não exige mais que a sincronização de configurações esteja ativada para os 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ê fez login no 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 descobertas de performance

O painel Performance recebe a nova guia Anotações em uma barra lateral expansível à esquerda que simplifica o processo de criação de observações para análise de rastreamento e colaboração ao compartilhar descobertas de desempenho.

Agora é possível rotular e conectar eventos com setas e destacar intervalos de tempo diretamente no rastreamento. Em seguida, é possível salvar, compartilhar e fazer upload dos rastreamentos anotados de volta no painel Performance.

Receber insights de performance diretamente no painel "Performance"

Agora você pode descobrir insights úteis na nova guia Insights na barra lateral esquerda do painel Performance. Os insights são consolidados do relatório do Lighthouse e do painel Insights de performance, que será descontinuado em breve.

A guia Insights tem como objetivo fornecer uma análise guiada 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 diferentes categorias e passe o cursor e clique nos itens. O painel Performance vai destacar os eventos correspondentes no rastreamento.

A equipe do DevTools aguarda 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 (em inglês).

Identifique mais facilmente mudanças excessivas no layout

A faixa Mudanças de layout está de cara nova. As mudanças de layout agora são marcadas com losangos roxos (mais visíveis) e são agrupadas em clusters com base na proximidade na linha do tempo. Os turnos e os clusters recebem uma tabela organizada com horários, pontuações, elementos e possíveis culpados na guia Resumo.

Além disso, a visualização de métricas em tempo real recebe o registro 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 apenas propriedades do compositor e gerenciar a contagem de camadas.

Problema do Chromium: 41006273.

A simultaneidade de hardware passa para "Sensores"

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

Problema do Chromium: 371463665.

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

Os rastreamentos de pilha no Console agora detectam, ignoram, recolhem e (se expandidos) esmaecem corretamente os frames que vêm de arquivos na lista de ignorados. Antes, o nome da função não ficava acinzentado no rastreamento expandido.

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

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

Problemas do Chromium: 40279542, 40945570, 345248263.

Elementos > Estilos: compatibilidade com modos de gravação sideways-* para sobreposições de grade e palavras-chave abrangentes do CSS

A guia Elementos > Estilos agora oferece suporte ao seguinte:

• 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 de CSS. Na prática, isso significa que, por exemplo, se inherit for uma cor, a guia Estilos vai mostrar um seletor de cores ao lado dela.

Problemas do Chromium: 40280717, 40706051, 40501131.

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

Agora o Lighthouse 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 Fontes > Editor, agora é possível fechar as guias com arquivos abertos focando no botão X e pressionando Enter ou barra de espaço.
• Em Performance, agora é possível selecionar uma entrada no rastreamento e pressionar Espaço para abrir o menu de contexto.
• Em Performance, a guia Insights na barra lateral à esquerda pode ser acessada com o teclado e percorrida com a tecla "Tab".

Problema do Chromium: 372411090.

Destaques diversos

Confira algumas correções e melhorias importantes 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 > Carregamentos especulativos > Regras agora tem um botão de impressão bonita {} semelhante a Fontes > Editor (40279147).
• Expressões dinâmicas: ao pressionar Tab depois de selecionar uma opção de preenchimento automático, o campo de edição é fechado em vez de o texto ser recuado (349939551).
• Elementos > Estilos: anchor() e anchor-size() são compatíveis com uma nova sintaxe em que é possível reordenar argumentos e omitir a direção anchor-size() (343516786). Além disso, foi corrigida a renderização de substituição (365802559).
• Rede: correções nas prévias do GraphQL (369931288).
• Performance: agora informa o progresso incremental do carregamento e do processamento de rastreamentos.
• WebAuthn: agora atualiza dinamicamente as credenciais modificadas pelos métodos signal* (368467199).
• WebAssembly: um aviso no Console informa se vários símbolos de depuração estão disponíveis para um módulo WebAssembly e qual deles está em uso (40879198, 369515221).
• A sobreposição de Core Web Vitals é removida da guia Renderização 328487897.
• Agora, os recursos de IA generativa não exigem a sincronização das configurações do Chrome.

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