Novidades no DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

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.

A opção de menu "Ask AI" e o botão correspondente.

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.

O novo painel de assistência por IA respondendo a uma solicitação.

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 > guia Inovações de IA. Ele lista considerações importantes, descreve os recursos de IA e permite que você os ative e desative individualmente.

A nova guia "Inovações de IA".

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.

Nova guia de anotações na barra lateral à esquerda e evento, intervalo e conexão anotados.

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.

O antes e depois de uma atualização na faixa "Layout shifts" e a reorganização da guia "Summary".

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.

Antes e depois de adicionar o registro "Mudanças de layout" à visualização de métricas em tempo real.

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.

As animações de nomeação antes e depois na faixa, marcando as não compostas e mostrando o motivo da falha.

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.

Antes e depois de mover a configuração "Concorrência de hardware" para 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 > Lista de ignorados > Scripts anônimos do eval ou console para definir que as Ferramentas do desenvolvedor ignorem scripts anônimos sem URL de origem.

A lista de antes e depois de ignorar melhorias em stack traces.

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. A resolução de palavras-chave em todo o CSS antes e depois.

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.

A auditoria antes e depois da ativação para páginas nã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.

Novidades no DevTools

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