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

Redes de filtros reinventadas

O painel Rede recebe novos filtros, reformulados com base no seu feedback. Os filtros específicos de 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 para ocultar, bloquear e relacionadas a 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 para a gente 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 marcará o botão de Exportar com uma seta. Mantenha o botão pressionado e selecione Exportar HAR (com dados confidenciais) 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 ao painel Elementos.

Preencher valores automaticamente para propriedades text-emphasis-*

O preenchimento automático na guia Estilos 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 com excesso e têm overflow: scroll ou overflow: auto, para que você possa detectar facilmente o excesso de rolagem. Assim como os outros selos, esse símbolo reflete o DOM atual e desaparece se o conteúdo parar de estourar devido a, por exemplo, uma mudança de tamanho.

Antes e depois de marcar os estouros de rolagem com um selo.

Problema do Chromium: 40670442.

Declarações vazias após regras aninhadas não "se deslocam"

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

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

Recomendações em métricas ao vivo

As métricas em tempo real agora podem fornecer recomendações específicas para você 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 Considerar as condições de teste locais em cada card de métricas (se houver) e Considerar ambientes de usuário reais nas Configurações de ambiente.

Seções expandidas com recomendações.

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

Agora é possível navegar pela localização atual na linha do tempo de uma gravação de apresentação: "jump" navegar entre as navegações estruturais, substituir as secundárias e remover várias. Antes, quando você selecionava um breadcrumb pai, os filhos dele desapareciam.

Melhorias no painel de memória

Essa versão traz várias melhorias para o painel Memória.

Novo perfil "Elementos removidos"

O painel Memória recebe um novo tipo de perfil: Elementos desconectados. Ela mostra objetos que são retidos por uma referência JavaScript.

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

Problema do Chromium: 350519222.

Melhoria na nomenclatura de objetos JS simples

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

  • Nomeados com base nas propriedades que contêm, por exemplo, {firstProperty, secondProperty, ..., *nthProperty}.
  • Pesquisáveis por esses nomes construídos pelo DevTools.
  • Agrupados se tiverem as mesmas propriedades.

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

Problema do Chromium: 350519222.

Desativar a aplicação de temas dinâmicos

Agora você pode desativar a correspondência automática de 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.

O antes e o depois da desativação da 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 no app Documentos Google), o Chrome cria um processo de renderizador separado para cada uma. 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 mensagem "Esta guia compartilha recursos com outras guias..." for exibida enquanto o DevTools estiver aberto, você fará parte do pequeno grupo que ativou o experimento Compartilhamento de processos.

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 apresenta um limite de < 20 KB para ignorar sugestões de compactação de recursos, ajudando você a se concentrar apenas na economia significativa do tamanho do arquivo. Confira 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

Estas são algumas correções e melhorias importantes feitas nesta versão:

  • Elementos:
    • Várias correções para edição de CSS aninhados (41486635, 361477264, 328263458, 41487826).
    • Correção de propriedades personalizadas com valores vazios, mas definidas, sendo analisadas como indefinidas (365578428).
  • Console: corrigimos um caractere & não escapado em strings de várias linhas em comandos cURL (352651673).
  • Memória: foi corrigida a seleção padrão em páginas com service workers. Agora, a linha de execução principal está selecionada (40669896).
  • Segurança: o esquema de URL destacado agora é atualizado corretamente à medida que 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 seu navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes das Ferramentas do desenvolvedor, permitem testar APIs avançadas da plataforma Web e encontrar problemas no seu site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.

Novidades no DevTools

Uma lista de tudo que foi abordado na série Novidades no DevTools.