Novidades do Chrome 134 para as DevTools

Sofia Emelianova

Painel de privacidade e segurança

O antigo painel Segurança evoluiu para o painel Privacidade e segurança e ganhou uma nova seção dedicada à privacidade. Nesta seção, você pode:

• Com o DevTools aberto, limite temporariamente os cookies de terceiros com ou sem exceções e teste o comportamento de um site.
• Confira uma tabela com informações sobre cookies de terceiros, incluindo se eles foram bloqueados ou isentos pelo modo de limite temporário e quais tipos de cookies podem ser afetados.

Problema do Chromium: 352364594.

Melhorias no painel de desempenho

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

Predefinições calibradas de limitação de CPU

Agora é possível calibrar automaticamente e receber mais duas predefinições de limitação da CPU que se aproximam mais dos dispositivos móveis de nível baixo e médio.

No menu suspenso Performance > Limitação de CPU, selecione Calibrar.... Em Configurações, clique em Calibrar, Continuar e aguarde as DevTools calcularem as taxas de lentidão do seu dispositivo. As opções calibradas de limitação podem ser encontradas no menu suspenso Performance > Limitação da CPU.

Selecionar diferentes eventos de performance na mesma conversa com a IA

Agora, o painel Assistência de IA permite mudar o evento selecionado no rastreamento de desempenho no mesmo chat. Ou seja, não é preciso iniciar uma nova conversa para falar sobre um evento diferente.

Destaque de dados próprios e de terceiros na seção "Performance"

O painel Performance recebe uma nova tabela na guia Resumo que permite distinguir entre dados próprios, de terceiros e de extensão.

Passe o cursor sobre as entradas na tabela para ver os eventos relevantes destacados no rastreamento de desempenho. Marque Diminuir terceiros para focar apenas nos dados próprios.

Além disso, clique no ícone account_tree ao lado de uma entrada destacada na tabela para acessar a guia De baixo para cima agrupada por terceiros.

Dados de campo em dicas e insights de marcadores

Se você tiver dados de campo ativados, eles vão aparecer nas dicas de ferramentas do marcador de métricas e na guia Insights.

Problema do Chromium: 368135130.

Insight "Reflow forçado"

A guia Performance > Insights ganhou um novo insight: Refluxo forçado. O reflow forçado acontece quando o mecanismo de renderização pausa a execução do script para calcular o estilo e o layout. Refluxos forçados podem ser gargalos que você quer evitar.

Ao passar o cursor sobre o novo insight, ele destaca a principal chamada de função com um reflow forçado, o rastreamento de pilha e mostra o tempo total de reflow.

Problema do Chromium: 369766156.

Insight "Otimizar o tamanho do DOM"

Outro novo insight é Otimizar o tamanho do DOM. Uma árvore do DOM grande pode reduzir a velocidade da sua página.

O insight destaca reflows de layout longos e recálculos de estilo afetados por um tamanho grande do DOM no rastreamento de performance e fornece estatísticas sobre o total de elementos, a profundidade e a maioria dos filhos.

Estender o trace de desempenho com console.timeStamp

A API Extensibility agora oferece suporte aconsole.timeStamp. Além de performance.measure e performance.mark, agora é possível criar faixas personalizadas no rastreamento de performance e capturar marcações personalizadas usando console.timeStamp, como uma alternativa mais leve que não adiciona entradas à linha do tempo de performance interna do navegador, mas apenas as mostra no rastreamento de performance.

Por exemplo, é possível usar a seguinte sintaxe:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Com Configurações de captura > check_box Mostrar rastreamentos personalizados, você vai ver seu rastreamento personalizado no rastreamento:

Melhorias no painel "Elementos"

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

Valores em tempo real de estilos animados

A guia Elementos > Estilos agora atualiza os valores de estilos animados em tempo real.

Suporte à pseudoclasse :open e a vários pseudoelementos

O painel Elementos agora oferece suporte à pseudoclasse :open na seção Estilos > :hov > Forçar estado de elemento específico para determinados elementos HTML, como <details>, <select>, <dialog> e <input>.

Além disso, o painel Elementos agora também é compatível com vários novos pseudoelementos: ::checkmark, ::picker-icon e ::column, ::scroll-button, ::scroll-marker e ::scroll-marker-group relacionados a carrosséis.

Problemas do Chromium: 383157184, 379805728.

Copiar todas as mensagens do console

Agora é possível clicar com o botão direito do mouse e copiar todas as mensagens do console de uma vez.

Além disso, você encontra uma opção de cópia semelhante no menu de contexto de Rede > Payload da solicitação.

Problemas do Chromium: 40206460, 384967020.

Unidades de bytes no painel "Memória"

O painel Memória agora mostra tamanhos com unidades de bytes adequadas em vez de grandes números de bytes.

Problema do Chromium: 388589515.

Destaques diversos

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

• Performance:
  • Anotações: agora você pode clicar no rótulo para selecionar a entrada correspondente (crbug.com/388224764).
  • Insights: clicar em CLS na guia Insights agora seleciona o pior cluster em vez da pior mudança.
• Lista de ignorados: os internos do nó que começam com node: agora são ignorados por padrão (crbug.com/382453615).
• Expressões em tempo real: correção de um bug que fazia com que as expressões em tempo real afetasse o comando $_ (crbug.com/388437265).
• Elementos > Estilos: comprimentos relativos agora têm um popover que mostra o valor absoluto (crbug.com/40778486).
• Acessibilidade: os cabeçalhos de coluna agora anunciam se podem ser classificados.
• Os ícones das guias agora estão à direita, ao lado dos nomes, em vez de à esquerda.

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.