Novidades do Chrome 130 para as DevTools

Sofia Emelianova

Melhorias no painel "Rede"

Esta versão traz várias melhorias ao painel Rede.

Filtros de rede reformulados

O painel Rede recebe 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 simplificar a interface, as caixas de seleção relacionadas a ocultar, bloquear e terceiros foram movidas para uma lista suspensa. A lista tem um número que informa quantos filtros estão marcados no menu suspenso.

Para voltar ao design antigo do filtro, desmarque settings Configurações > Experimentos > check_box_outline_blank Redesign of the filter bar in the Network panel.

Conte para a gente o que você achou do novo design.

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 vai mais conter 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 Configurações > Preferências > Rede > check_box Permitir a geração de HAR com dados sensíveis. O painel Rede vai marcar o botão Exportar download com uma seta. Toque e mantenha pressionado o botão e selecione Exportar HAR (com dados sensíveis) no menu suspenso.

Problema do Chromium: 361717594.

Melhorias no painel "Elementos"

Esta 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:

• Abreviação text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Problema do Chromium: 361471205.

Transbordamentos de rolagem marcados com um selo

O painel Elementos agora marca com um novo selo "scroll" os elementos que contêm conteúdo transbordante e têm overflow: scroll ou overflow: auto. Assim, você pode identificar facilmente os transbordamentos de rolagem. Assim como os outros selos, ele reflete o DOM atual e desaparece se o conteúdo parar de transbordar devido a uma mudança de tamanho, por exemplo.

Problema do Chromium: 40670442.

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 venham depois de regras aninhadas, a guia Estilos agora não "move para cima" essas declarações durante a análise.

No exemplo de código a seguir, a declaração simples após a regra aninhada não faz com que o Chrome reordene inesperadamente os estilos em cascata:

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

  background-color: green;
}

Problema do Chromium: 358119261.

Melhorias no painel de desempenho

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

Recomendações nas métricas em tempo real

Agora, as métricas dinâmicas podem fornecer recomendações específicas que ajudam 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 locais em cada card de métrica (se houver) e Considere ambientes de usuários reais nas Configurações de ambiente.

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

Navegar pela navegação estrutural

Agora é possível navegar pelos breadcrumbs na linha do tempo de uma gravação de performance: "pular" para frente e para trás entre os breadcrumbs, substituir um breadcrumb filho e remover vários filhos. Antes, quando você selecionava um rastreador pai, os filhos desapareciam.

Melhorias no painel de memória

Esta versão traz várias melhorias ao painel Memória.

Novo perfil "Elementos removidos"

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

Problema do Chromium: 350519222.

Melhoria na nomenclatura de objetos JS simples

Para organizar e reduzir a categoria Object nos instantâneos de heap, os objetos JavaScript simples agora são:

• Nomeados com base nas propriedades que contêm, por exemplo, {firstProperty, secondProperty, ..., *nthProperty}.
• É possível pesquisar por esses nomes criados pelo DevTools.
• Agrupados se tiverem as mesmas propriedades.

Problema do Chromium: 350519222.

Desativar o tema dinâmico

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

Para desativar o tema dinâmico, desmarque settings Configurações > Preferências > Aparência > check_box_outline_blank Corresponder ao esquema de cores do Chrome e recarregue o DevTools.

Problema do Chromium: 328472696.

Chrome Experiment: Process sharing

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

Se você vir uma mensagem informando "Esta guia compartilha recursos com outras guias..." enquanto o DevTools estiver aberto, isso significa que você faz parte do pequeno grupo com o experimento Compartilhamento de processos ativado.

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 ignorância de < 20 KB para sugestões de compactação de recursos, ajudando você a se concentrar apenas nas economias significativas de tamanho de 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

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

• Elementos:
  • Várias correções para edição de CSS aninhado (41486635, 361477264, 328263458, 41487826).
  • Correção da análise de propriedades personalizadas definidas, mas com valor vazio, como indefinidas (365578428).
• Console: foi corrigido um e comercial 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 service workers. Agora, a linha de execução principal está selecionada (40669896).
• Segurança: o destaque do esquema de URL agora é atualizado corretamente à medida que o estágio de segurança de uma origem muda (359920086).

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.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

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