Novidades do Chrome 130 para as DevTools

Sofia Emelianova
Sofia Emelianova
GitHub

Melhorias no painel Network

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

Filtros de rede reinventados

O painel Rede tem 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 possui um número que informa quantos filtros foram verificados no menu suspenso.

Antes e depois de mover os filtros relacionados a ocultar, bloquear e terceiros em um menu suspenso.

Para restaurar o design de filtro antigo, desmarque Configurações > Experiências > Reformulação da barra de filtro no painel "Rede".

Queremos saber sua opinião sobre a nova versão do design.

Problema do Chromium: 362672528.

As exportações 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 terá mais os cabeçalhos Cookie, Set-Cookie e Authorization por padrão.

Para exportar registros no formato HAR com os dados sensíveis, ative as Configurações > Preferências > Rede > Permitir gerar HAR com dados sensíveis. O painel Rede marcará o botão de 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 ao painel Elementos.

Valores de preenchimento automático 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 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.

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

Seguindo a decisão do grupo de trabalho do CSS de permitir declarações simples após as regras aninhadas, a guia Estilos agora não "mexe para cima" essas declarações durante a análise.

No exemplo de código a seguir, a declaração básica após a regra aninhada agora não faz com que o Chrome reorganize inesperadamente os estilos na cascata:

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 em tempo real

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 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 um breadcrumb pai, os filhos dele desapareciam.

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 separados" ao painel "Memória".

Problema do Chromium: 350519222.

Nomeação aprimorada de objetos JS simples

Para organizar e limpar a categoria Object em snapshots de alocação 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 é 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 você receber uma mensagem informando que "Esta guia compartilha recursos com outras guias", enquanto o DevTools está aberto, você faz parte do pequeno grupo com o experimento de compartilhamento de processos ativado.

A barra de informações "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 e ajudar 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:
  • 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 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 o que foi abordado na série Novidades no DevTools.