Novidades das DevTools no Chrome 133

Histórico de chat persistente com IA

O painel Assistência de IA agora mantém seu histórico de chat localmente em todas as sessões. Assim, você pode ver suas conversas anteriores com o Gemini mesmo depois de recarregar o DevTools ou o Chrome.

Melhorias no painel de desempenho

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

Insight de entrega de imagens

A guia Performance > Insights agora pode destacar imagens cujo tamanho do arquivo pode ser otimizado. Clique em uma imagem no insight para destacá-la na faixa Rede.

Para saber mais sobre como otimizar a exibição de imagens, consulte Codificar imagens de forma eficiente.

Navegação clássica e moderna pelo teclado

No painel Performance, agora é possível escolher seu estilo preferido de navegação pelo teclado, com as seguintes diferenças principais:

• Clássico: aplique zoom com a roda do mouse (touchpad para cima ou para baixo) e role verticalmente com Shift + roda do mouse.
• Moderno: rolagem vertical com a roda do mouse, rolagem horizontal com Shift + roda do mouse e zoom com Command/Control + roda do mouse.

Para escolher seu estilo preferido, clique em Ajuda Mostrar atalhos no canto superior direito do painel e selecione Clássico ou Moderno. A caixa de diálogo de atalhos também oferece um guia rápido dos atalhos disponíveis.

Ignorar scripts irrelevantes no gráfico em degradê

Para focar melhor no seu código, agora é possível adicionar scripts irrelevantes à lista de ignorados diretamente no painel Performance. O painel vai recolher automaticamente o aninhamento excessivo.

Para adicionar scripts à lista de ignorados, clique em compactar Mostrar caixa de diálogo de configurações da lista de ignorados na barra de ações superior e digite uma expressão regular no campo de entrada. O gráfico de chamas vai aplicar a nova regra conforme você digita.

O DevTools salva as regras da lista de ignorados que você adiciona em Configurações Configurações > Lista de ignorados. É possível ativar e desativar essas regras na caixa de diálogo quando quiser.

Marcador da linha do tempo e destaque do intervalo ao passar o cursor

Para ajudar você a entender melhor o rastreamento de performance, o painel Performance agora faz o seguinte:

• Mostra um marcador vertical que abrange todo o rastreamento de desempenho quando você passa o cursor sobre a Linha do tempo.
• Destaca um intervalo na linha do tempo quando você passa o cursor sobre os itens na faixa Principal.

Configurações de limitação recomendadas

O painel Performance agora recomenda configurações de limitação nas métricas em tempo real e nos menus suspensos Configurações Configurações de captura relevantes.

O controle de CPU recomendado é (por enquanto) o 4x slowdown mais usado, e a recomendação de rede se baseia nos dados do Relatório de experiência do usuário do Chrome, se ele estiver ativado nas métricas em tempo real.

Além disso, o painel Performance agora lembra as configurações de limitação usadas ao lado de cada rastreamento no menu suspenso Sessões recentes na barra de ações.

Marcadores de tempo em uma sobreposição

Os marcadores de tempo foram movidos da faixa Tempos para a parte de baixo do rastreamento. Agora eles são sobrepostos em cima de todas as faixas e ficam visíveis mesmo que a faixa Tempos esteja oculta.

A faixa de tempos retém suas chamadas personalizadas de mark() e measure().

Stack traces de chamadas JavaScript no resumo

A guia Performance > Resumo agora mostra rastreamentos de pilha de chamadas JavaScript, incluindo as assíncronas.

As configurações de ícones foram movidas para o menu no Elements

As configurações de selo no painel Elementos foram movidas de uma barra de ações oculta por padrão para o menu correspondente ao clicar com o botão direito do mouse.

Novo painel "O que há de novo"

O painel O que há de novo está de cara nova, mais parecido com o design do Chrome.

Problema do Chromium: 325441858.

Lighthouse 12.3.0

O painel Lighthouse agora executa o Lighthouse 12.3.0.

Essa atualização adiciona, entre outras coisas, novas auditorias que verificam o isolamento adequado da origem com COOP e uma política HSTS forte. Confira a lista completa de mudanças.

Para aprender o básico sobre como usar o painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 40543651.

Destaques diversos

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

• Fontes: quando pausado, o Debugger não muda inesperadamente para o contexto do service worker se ele for criado após a pausa (373893057).
• Performance:
  • Ao passar o cursor sobre os scripts, as dicas de ferramentas no gráfico de chamas agora mostram URLs, se houver (368541957).
  • Resumo: o gráfico de pizza é substituído por uma representação em barras.
  • A caixa de seleção Dados de extensão em Configurações de captura foi renomeada para Mostrar faixas personalizadas.
  • A guia Insights agora tem uma seção Insights aprovados (N), que fica recolhida por padrão.
• Application > Storage: é possível criar entradas de armazenamento com chaves vazias porque elas são tecnicamente válidas (373703285).
• O modo dispositivo agora está desativado para páginas chrome:// (40186276).
• Rede:
  • Com a configuração correspondente ativada, clicar em Exportar HAR uma vez abre um menu com duas opções (limpo e com dados sensíveis). Antes, o menu era aberto com um clique longo (378076279).
  • A opção Copiar como cURL agora usa o atributo -b para ignorar cookies e ser mais legível, em vez de -H 'cookie:...' (40791742).
• Acessibilidade: agora é possível mover guias dentro de painéis para a esquerda ou direita com um menu de contexto (383164782).
• Bloqueio de solicitação de rede: essa configuração do menu de comandos agora está sincronizada com a caixa de seleção correspondente (378058733).

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.