Novidades do Chrome 132 para as DevTools

Depurar solicitações de rede, arquivos de origem e rastreamentos de desempenho com o Gemini

Além do estilo CSS, agora você pode conversar com o Gemini sobre solicitações de rede, arquivos de origem e rastreamentos de performance.

Semelhante ao menu de contexto no painel Elementos, para abrir o painel Assistência de IA e iniciar o chat com o Gemini, clique com o botão direito do mouse e selecione Perguntar à IA ou clique no botão Perguntar à IA ao lado de:

• Uma solicitação de rede no painel Rede.
• Um arquivo na guia Fontes > Página.
• Uma atividade na faixa Performance > Principal.

O Gemini vai considerar o contexto da solicitação, do arquivo ou da atividade selecionada.

A equipe do DevTools quer saber sua opinião em crbug.com/364805393.

Histórico de chat de IA

Agora você pode restaurar e acessar conversas anteriores com o Gemini no painel Assistência de IA. Para isso, clique no botão Adicionar Nova conversa no canto superior esquerdo do painel ou use os botões e opções de menu Perguntar à IA nos painéis Rede, Fontes > guia Página e Desempenho > faixa Principal.

Para acessar uma das suas conversas anteriores, selecione o comando correspondente no menu suspenso abaixo do botão histórico Histórico. O painel Assistência de IA vai lembrar seu histórico de chat enquanto o DevTools estiver aberto.

"Armazenamento"" id="extension-storage" tabindex="-1">Gerenciar o armazenamento de extensões em "Aplicativo > Armazenamento"

Assim como no armazenamento local e de sessão, agora é possível ver e mudar as entradas de armazenamento de extensões na seção Application > Storage.

Problema do Chromium: crbug.com/40963428.

Melhorias no desempenho

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

Fases de interação nas métricas em tempo real

Agora é possível expandir as interações nas métricas de desempenho em tempo real para conferir um detalhamento das fases e dos respectivos tempos.

Conforme comunicado em A extensão Web Vitals, agora no DevTools, o lançamento desses recursos marca o fim do suporte à extensão Web Vitals.

Problema do Chromium: crbug.com/369097528.

Informações de bloqueio da renderização na guia "Resumo"

Quando você seleciona uma solicitação de rede marcada com um triângulo vermelho na faixa Performance > Rede, a guia Resumo, além da dica (refatorada), também informa que a solicitação está bloqueando a renderização.

Suporte para eventos scheduler.postTask e as respectivas setas de iniciador

A faixa Performance > Principal agora mostra eventos scheduler.postTask() e as seguintes setas de iniciador entre:

• Schedule postTask -> Fire postTask
• Schedule postTask -> Abort postTask

Problema do Chromium: crbug.com/40775984.

Estilos"" id="animations" tabindex="-1">Melhorias no painel "Animações" e na guia "Elementos" > "Estilos"

Esta versão traz algumas melhorias no painel Animações e na guia Elementos > Estilos.

Estilos" para "Animações"" id="animations-link" tabindex="-1">Ir de "Elementos" > "Estilos" para "Animações"

A guia Elementos > Estilos agora coloca os ícones Ir para o painel "Animações" animation ao lado do valor das propriedades animation para que você possa inspecionar as animações com facilidade.

Atualizações em tempo real na guia "Calculada"

A guia Elementos > Calculado agora atualiza os valores calculados em tempo real quando, por exemplo, as animações os atualizam.

Emulação de pressão de computação em sensores

O painel Sensores agora permite emular a pressão da CPU Nominal, Fair, Serious e Critical.

Problema do Chromium: crbug.com/362277525.

Objetos JS com o mesmo nome agrupados por origem no painel "Memória"

O painel Memória agora distingue entre objetos JS com o mesmo nome que vêm de origens diferentes e os agrupa de acordo com isso.

Problema do Chromium: crbug.com/357902505.

Novo visual das configurações

Para alinhar melhor o design da interface do usuário, as configurações do DevTools agora são mais parecidas com as do Chrome. Em especial, as seções agora são separadas visualmente em "cards".

O painel de insights de desempenho foi descontinuado e removido do DevTools

Todos os recursos importantes e úteis do painel Insights de performance agora estão no painel Performance, especificamente em métricas em tempo real, na guia lateral Insights e na faixa Mudanças de layout. Por isso, esta versão descontinua e remove o painel Insights de desempenho do DevTools.

A equipe do DevTools agradece o feedback que você enviou sobre a descontinuação desse painel e a experiência geral de depuração de desempenho. Como sempre, queremos saber sua opinião e conhecer suas perspectivas. Continue assim!

Destaques diversos

Confira algumas correções e melhorias importantes nesta versão:

• Performance:
  • Removemos um limite desnecessário de três caracteres para consultas de pesquisa.
  • Adicionamos o botão Início Início, que leva você de volta à tela de métricas em tempo real.
  • Corrigimos os atalhos de zoom de rastreamento Shift+S/W, que estavam com falha.
• Elementos > Estilos:
  • Adição de anchor-center ao preenchimento automático 341991541.
  • Correção de um bug em que o editor do flexbox não estava disponível para valores de duas palavras 341964645.
• Rede: as falhas de pré-busca agora são avisos amarelos em vez de erros vermelhos para indicar que a exibição do conteúdo não é afetada 372055494.

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