Novidades do Chrome 134 para as DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

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 dispensados pelo modo de limite temporário e quais tipos de cookies podem ser afetados.

Antes e depois de adicionar a seção "Privacidade" ao painel "Segurança".

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.

Antes e depois de adicionar a calibragem de limitação.

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 na mesma conversa. Em outras palavras, não é necessário 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 tem 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 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, agora poderá conferir essas informações nas dicas de ferramentas de marcador de métrica e na guia Insights.

Antes e depois de adicionar dados registrados às dicas da ferramenta de marcador e à guia "Insights".

Problema do Chromium: 368135130.

Insight de "Reflow forçado"

A guia Performance > Insights ganhou uma nova adição ao conjunto de insights: 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.

Antes e depois de adicionar o insight "Refluxo forçado".

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.

Antes e depois de adicionar a análise "Otimizar o tamanho do DOM".

Estenda 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 desempenho e capturar marcações personalizadas usando console.timeStamp, como uma alternativa mais leve que não adiciona entradas à linha do tempo de desempenho interna do navegador, mas apenas as mostra no rastreamento de desempenho.

Por exemplo, você pode 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 > Mostrar rastreamentos personalizados, você vai ver seu rastreamento personalizado no rastreamento:

Antes e depois de adicionar suporte a console.timeStamp.

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 para a pseudoclasse :open e 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>.

Antes e depois de adicionar a opção &quot;:open&quot;.

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

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.

Antes e depois de adicionar a opção &quot;Copiar console&quot;.

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 byte no painel "Memória"

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

Antes e depois mostrando unidades 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: os 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 aos DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.