Novidades do Chrome 132 para as DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

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

Além dos estilos CSS, agora você pode conversar com o Gemini sobre solicitações de rede, arquivos de origem e rastros de desempenho.

Assim como no menu de contexto do painel Elements, para abrir o painel AI assistance e iniciar o chat com o Gemini, clique com o botão direito do mouse e selecione Ask AI ou clique no botão Ask AI ao lado do seguinte:

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

Botões e opção de menu do Ask AI em Rede, Fontes e Desempenho.

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

A equipe do DevTools está ansiosa para receber seu feedback em crbug.com/364805393.

Histórico de chat da IA

Agora você pode restaurar e conferir conversas anteriores com o Gemini no painel Assistência de IA clicando no botão Nova conversa no canto superior esquerdo do painel ou usando os botões Perguntar à IA e as opções de menu do painel Rede, Origens > guia Página e Performance > faixa Principal.

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

O histórico de chat de IA em um menu suspenso abaixo do botão "Histórico".

"Armazenamento"" id="extension-storage" tabindex="-1">Gerenciar o armazenamento da extensão em "Aplicativo> Armazenamento"

Assim como no armazenamento local e da sessão, agora é possível conferir e mudar as entradas de armazenamento da extensão na seção Aplicativo > Armazenamento.

Antes e depois de adicionar a seção "Armazenamento da extensão" ao painel "Aplicação".

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 ao vivo

Agora é possível expandir as interações nas métricas de desempenho ao vivo para conferir uma análise das fases e dos respectivos horários.

O antes e o depois de adicionar um detalhamento das fases e dos respectivos tempos de interação.

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

Problema do Chromium: crbug.com/369097528.

Renderizar informações de bloqueio 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 de ferramentas (refactorizada), agora também informa que a solicitação está bloqueando a renderização.

Antes e depois de adicionar informações de bloqueio de renderização à guia "Resumo".

Suporte a eventos scheduler.postTask e as setas de ativação deles

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

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

O antes e o depois de adicionar suporte para eventos scheduler.postTask e as setas de ativação.

Problema do Chromium: crbug.com/40775984.

Estilos"" id="animations" tabindex="-1">Painel "Animations" e melhorias na guia "Elements > Styles"

Essa versão traz algumas melhorias para o painel Animations e a guia Elements > Styles.

A guia Elements > Styles agora coloca botões de animação Jump to Animations panel ao lado do valor das propriedades animation para que você possa modificar a animação com facilidade.

Antes e depois de adicionar um link da guia "Estilo" ao painel "Animações".

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

A guia Elements > Computed agora atualiza os valores computados em tempo real quando, por exemplo, as animações são atualizadas.

Calcular a emulação de pressão em sensores

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

Antes e depois de adicionar a opção de emulação de pressão da CPU ao painel "Sensores".

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 objetos JS com o mesmo nome que vêm de origens diferentes e os agrupa de forma correspondente.

O agrupamento antes e depois de objetos JS com o mesmo nome também por origem.

Problema do Chromium: crbug.com/357902505.

Nova aparência das configurações

Para alinhar melhor o design da interface do usuário, as configurações do DevTools agora têm uma aparência mais próxima das do Chrome. Em particular, as seções agora são separadas visualmente em "cards".

O antes e o depois separando as seções em "cards".

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

Todos os recursos importantes e úteis do painel Insights de desempenho agora estão disponíveis no painel Performance, especificamente nas métricas em tempo real, na guia Insights da barra lateral e na faixa Mudanças de layout. Portanto, essa versão descontinua e remove o painel Insights de desempenho do DevTools.

A equipe do DevTools agradece o feedback sobre a descontinuação desse painel e a experiência geral de depuração de desempenho. Como sempre, queremos saber sua opinião e aprender com suas perspectivas. Continuem enviando!

Destaques diversos

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

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

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.