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:

  • Enquanto o DevTools estiver 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 que tipo 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 duas predefinições de limitação de CPU adicionais que aproximam com mais precisão os dispositivos móveis de nível baixo e intermediário.

No menu suspenso Performance > Restrição de CPU, selecione Calibrar. Em Configurações, clique em Calibrar, Continuar e aguarde até que as Ferramentas do desenvolvedor calculem as taxas de desaceleração do dispositivo. As opções de limitação calibrada estão no menu suspenso Performance > Limitação da CPU.

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

Selecionar diferentes eventos de performance no mesmo chat de IA

O painel Assistência por IA agora permite mudar o evento selecionado no rastro de desempenho no mesmo chat. Em outras palavras, você não precisa iniciar uma nova conversa para falar sobre um evento diferente.

Destaques próprios e de terceiros em "Performance"

O painel Performance tem uma nova tabela na guia Summary que permite distinguir entre dados próprios, de terceiros e de extensões.

Passe o cursor sobre as entradas na tabela para ver os eventos relevantes destacados no rastro de performance. Marque Diminuição de terceiros para se concentrar apenas nos dados próprios.

Além disso, clique no ícone ao lado de uma entrada destacada na tabela para acessar a guia Bottom-up agrupada por terceiros.

Dados de campo em insights e dicas de ferramentas de marcadores

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

Antes e depois de adicionar dados de campo às dicas de ferramentas de marcadores e à guia "Insights".

Problema do Chromium: 368135130.

Insight "Forced reflow"

A guia Performance > Insights recebeu uma nova adição ao conjunto de insights: Reflow 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. Os reflows forçados podem ser gargalos que você pode querer evitar.

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

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

Problema do Chromium: 369766156.

Insight "Otimizar o tamanho do DOM"

Outro insight novo é 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 que foram afetados por um tamanho grande de DOM no rastro de performance e fornece estatísticas sobre o total de elementos, profundidade e a maioria das crianças.

Antes e depois de adicionar o insight "Otimizar o tamanho do DOM".

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 rastro de desempenho e capturar marcas 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 rastro 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 faixas personalizadas, você vai encontrar a faixa personalizada no rastro:

Antes e depois de adicionar suporte a console.timeStamp.

Melhorias no painel "Elementos"

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

Valores em tempo real de estilos animados

A guia Elements > Styles 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 específico do elemento 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 oferece suporte a 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 você pode clicar com o botão direito do mouse e copiar todas as mensagens do console de uma só vez.

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

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

Problemas do Chromium: 40206460, 384967020.

Unidades de byte no painel "Memória"

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

Antes e depois de mostrar unidades de bytes.

Problema do Chromium: 388589515.

Destaques diversos

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

  • Performance:
    • Anotações: agora é possível clicar no rótulo para selecionar a entrada correspondente (crbug.com/388224764).
    • Insights: ao clicar em CLS na guia Insights, agora é selecionado o pior cluster em vez da pior mudança.
  • Lista de ignorados: os nós internos 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 a expressão em tempo real afetasse o comando $_ (crbug.com/388437265).
  • Elementos > Estilos: as medidas relativas agora têm um pop-up que mostra o valor absoluto (crbug.com/40778486).
  • Acessibilidade: os cabeçalhos de coluna agora informam se podem ser classificados.
  • Os ícones das guias agora estão à direita, ao lado dos nomes das guias, e não à esquerda.

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