Novidades do Chrome 130 para as DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

Melhorias no painel de rede

Essa versão traz várias melhorias para o painel Rede.

Redes de filtros reinventadas

O painel Rede tem novos filtros, reformulados com base no seu feedback. Os filtros específicos do tipo permanecem os mesmos: um conjunto de selos em uma barra de seleção múltipla limpa.

Para organizar a interface, as caixas de seleção de ocultação, bloqueio e terceiros são movidas para uma lista suspensa. A lista tem um número que informa quantos filtros estão marcados no menu suspenso.

Antes e depois de mover os filtros de ocultação, bloqueio e de terceiros para um menu suspenso.

Para voltar ao design antigo do filtro, limpe Settings > Experiments > Redesign of the filter bar in the Network panel.

Conte o que você achou do design reimaginado.

Problema do Chromium: 362672528.

As exportações de HAR agora excluem dados sensíveis por padrão

Para reduzir as chances de vazamentos acidentais de informações sensíveis, o registro de rede exportado no formato HAR não conterá mais cabeçalhos Cookie, Set-Cookie e Authorization por padrão.

Para exportar registros no formato HAR com dados sensíveis, ative as Configurações > Preferências > Rede > Permitir a geração de HAR com dados sensíveis. O painel Rede vai marcar o botão Exportar com uma seta. Toque e mantenha pressionado o botão e selecione Exportar HAR (com dados sensíveis) no menu suspenso.

Antes e depois de adicionar opções de exportação com e sem dados sensíveis à exportação HAR.

Problema do Chromium: 361717594.

Melhorias no painel "Elementos"

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

Valores de preenchimento automático para propriedades text-emphasis-*

O preenchimento automático na guia Styles agora sugere valores para as seguintes propriedades CSS:

Antes e depois de adicionar a opção de preenchimento automático para as propriedades "text-emphasis-*".

Problema do Chromium: 361471205.

Os estouros de rolagem marcados com um selo

O painel Elementos agora marca com um novo selo de "rolagem" os elementos que contêm conteúdo em excesso e têm overflow: scroll ou overflow: auto, para que você possa identificar facilmente estouros de rolagem. Como os outros selos, esse selo reflete o DOM atual e desaparece se o conteúdo deixar de transbordar devido, por exemplo, a uma mudança de tamanho.

Antes e depois de marcar o overflow de rolagem com um selo.

Problema do Chromium: 40670442.

As declarações simples após regras aninhadas não "são movidas para cima"

Seguindo a decisão do Grupo de Trabalho do CSS de permitir que declarações simples apareçam após regras aninhadas, a guia Styles não "muda para cima" essas declarações durante a análise.

No exemplo de código abaixo, a declaração simples após a regra aninhada agora não faz com que o Chrome reordene os estilos na cascata de forma inesperada:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Antes e depois de permitir que declarações simples apareçam depois de regras aninhadas.

Problema do Chromium: 358119261.

Melhorias no painel de desempenho

Essa versão traz várias melhorias ao painel Desempenho.

Recomendações nas métricas em tempo real

As métricas em tempo real agora podem fornecer recomendações específicas para ajudar você a configurar seu ambiente de desenvolvimento o mais próximo possível da experiência dos usuários.

Para receber recomendações, configure a busca de dados de campo no Chrome UX Report (CrUX) e expanda a seção Considere suas condições de teste local em cada card de métrica (se houver) e Considere ambientes de usuários reais nas Configurações do ambiente.

Seções expandidas com recomendações.

Siga as recomendações para aproximar a experiência dos seus usuários.

Agora é possível navegar pelos breadcrumbs na linha do tempo de uma gravação de performance: "pular" entre breadcrumbs, substituir um breadcrumb filho e remover vários filhos. Antes, quando você selecionava uma localização atual mãe, as filhas dela desapareceriam.

Melhorias no painel de memória

Essa versão traz várias melhorias ao painel Memory.

Novo perfil "Elementos removidos"

O painel Memória recebe um novo tipo de perfil: Elementos separados. Ele mostra objetos retidos por uma referência JavaScript.

Antes e depois de adicionar o tipo de perfil "Elementos desconectados" ao painel "Memória".

Problema do Chromium: 350519222.

Nomeação aprimorada de objetos JS simples

Para organizar e organizar a categoria Object em snapshots de heap, os objetos JavaScript simples agora são:

  • Nomeado com base nas propriedades que eles contêm, por exemplo, {firstProperty, secondProperty, ..., *nthProperty}.
  • Pesquisável por esses nomes criados pelo DevTools.
  • Agrupados se tiverem as mesmas propriedades.

Antes e depois de organizar a categoria de objetos em snapshots de heap.

Problema do Chromium: 350519222.

Desativar a aplicação de temas dinâmicos

Agora é possível desativar a correspondência automática das cores do DevTools com as cores do tema personalizado no Chrome.

Para desativar a aplicação de temas dinâmicos, limpe Settings > Preferences > Appearance > Match Chrome color scheme e recarregue as Ferramentas do desenvolvedor.

Antes e depois de desativar a aplicação de temas dinâmicos.

Problema do Chromium: 328472696.

Experimento do Chrome: compartilhamento de processos

Normalmente, quando você abre várias guias do mesmo site (como os Documentos Google), o Chrome cria um processo de renderização separado para cada uma delas. O experimento Compartilhamento de processo muda isso permitindo que várias guias compartilhem o mesmo processo de renderização para melhorar o desempenho.

Se a barra de informações "Esta guia compartilha recursos com outras guias..." for exibida enquanto o DevTools estiver aberto, significa que você faz parte do pequeno grupo com o experimento de Compartilhamento de processos ativado.

A infobar "Esta guia compartilha recursos com outras guias...".

O compartilhamento de processos pode afetar a depuração de pontos de interrupção e a análise de desempenho. Para mais informações, consulte Experimento do Chrome: compartilhamento de processos.

Lighthouse 12.2.1

O painel Lighthouse agora executa o Lighthouse 12.2.1.

Essa atualização introduz um limite de ignorar < 20 KB para sugestões de compactação de recursos para ajudar você a se concentrar apenas na economia significativa do tamanho dos arquivos. Veja a lista completa de mudanças.

Para aprender os conceitos básicos de uso do painel Lighthouse nas DevTools, consulte Lighthouse: otimizar a velocidade do site.

Problema do Chromium: 772558.

Destaques diversos

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

  • Elementos:
  • Console: corrigimos um caractere & não escapado em strings de várias linhas em comandos cURL (352651673).
  • Memória: corrigimos a seleção padrão em páginas com workers de serviço. A linha de execução principal agora está selecionada (40669896).
  • Segurança: o destaque do esquema de URL agora é atualizado corretamente quando o estágio de segurança de uma origem muda (359920086).

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 que foi abordado na série Novidades no DevTools.