Novidades no DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Barra de filtro simplificada no painel "Network"

A barra de filtro foi redesenhada para facilitar a filtragem de solicitações e organizar o painel Rede.

O experimento correspondente foi ativado por padrão nesta versão, mas será revertido. Acompanhe o progresso em crbug.com/1523150.

A nova barra de filtro tem dois menus suspensos: um para escolher os tipos de solicitação e outro para ocultar dados e URLs de extensão ou mostrar apenas cookies e solicitações bloqueadas e de terceiros. Ambos os menus têm suporte para seleção múltipla.

Para trazer de volta a antiga barra de filtro imediatamente, desative Settings > Experiments > Redesign of the filter bar in the Network panel.

Antes e depois da simplificação da barra de filtro no painel de rede.

Deixe seu feedback sobre o recurso em crbug.com/1500573.

Problema do Chromium: 1486431.

Melhorias nos elementos

Suporte a @font-palette-values

O painel "Elements" agora oferece suporte à regra @font-palette-values do CSS. Ele permite personalizar os valores padrão da propriedade font-palette.

Em Styles, clique no valor da propriedade font-palette e as Ferramentas do desenvolvedor vão levar você à seção dedicada @font-palette-values, onde é possível editar os valores personalizados.

A seção @font-palette-values em Estilos.

Problema do Chromium: 1501781.

Caso com suporte: propriedade personalizada como substituto de outra propriedade personalizada

Elementos > Estilos agora resolve uma propriedade personalizada que é um substituto de outra propriedade personalizada.

A resolução de uma propriedade personalizada como substituto de outra.

Problema do Chromium: 1499265.

Melhoria no suporte a mapas de origem

A opção Settings > Experiments > Resolve variable names in expressions using source maps foi ativada por padrão.

O DevTools usa mapas de origem para que você possa depurar seu código original em Sources e Scope, mesmo depois de combiná-lo, minificar ou compilar. Esse experimento permite avaliar os nomes das variáveis originais de forma consistente nas Ferramentas do desenvolvedor, incluindo, mas não se limitando a:

Para mais detalhes, consulte o RFC correspondente.

Problema do Chromium: 1444349.

Melhorias no painel de desempenho

Acompanhamento de interações otimizadas

A faixa Performance > Interações recebe traços que indicam atrasos de entrada e apresentação nos limites do tempo de processamento.

Antes e depois de adicionar barras de erro à faixa "Interações".

Além disso, ao passar o cursor sobre uma interação, você pode conferir uma dica útil com detalhes dos tempos.

Problema do Chromium: 1495751.

Filtragem avançada nas guias "Bottom-Up", "Call Tree" e "Event Log"

As guias Bottom-Up, Call Tree e Event Log no painel Performance têm três novos botões para filtragem avançada:

  • Match case.
  • Expressão regular.
  • Corresponder a palavra inteira.

Os três novos botões para filtragem avançada.

Além disso, para ajudar você a manter o contexto, agora apenas os itens de nível superior correspondem ao filtro na guia Bottom-Up. Antes, o filtro correspondia a todos os nós.

Problema do Chromium: 1496355.

Marcadores de recuo no painel "Origens"

O Editor no painel Origens agora marca blocos de código recuados com linhas verticais para sua conveniência.

O antes e o depois de marcar blocos de código recuados com linhas verticais.

Problema do Chromium: 1479986.

Sugestões úteis para cabeçalhos e conteúdo substituídos no painel de rede

O painel Rede agora mostra dicas de ferramentas quando você passa o cursor sobre o ícone de ponto roxo ao lado das guias Cabeçalhos e Resposta de uma solicitação. As dicas mostram o que foi substituído pelo DevTools.

As novas dicas de ferramentas ao lado do ícone de ponto roxo nas guias "Cabeçalhos" e "Resposta".

Problema do Chromium: 1469776.

Novas opções do menu de comando para adicionar e remover padrões de bloqueio de solicitações

Agora é possível digitar comandos para adicionar ou remover padrões de bloqueio de solicitações de rede no Menu de comandos.

O antes e o depois de adicionar novos comandos para adicionar ou remover padrões de bloqueio de rede.

O comando Adicionar leva você à caixa de diálogo para especificar o padrão, e o comando Remover remove todos os padrões sem abrir o painel Bloqueio de solicitações de rede.

O experimento de violações da CSP foi removido

A guia experimental Violations of the Content Security Policy (violações da CSP) apresentada na versão 89 foi removida por ser redundante.

Para conferir os detalhes do CSP rapidamente, acesse Aplicação > Frames > Política de segurança de conteúdo (CSP).

Política de Segurança de Conteúdo no painel "Application".

Além disso, o painel Issues (Problemas) informa sobre violações do CSP.

Política de Segurança de Conteúdo no painel "Application".

Lighthouse 11.3.0

O painel Lighthouse agora executa o Lighthouse 11.3.0. Consulte a lista completa de mudanças. Entre as mudanças importantes, está a capacidade de gerar relatórios em páginas 404.

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

Problema do Chromium: 772558.

Acessibilidade

Esta versão tem as seguintes melhorias de acessibilidade:

  • Em Rede > Payload, agora é possível usar o foco de guia para abrir a origem da visualização e abrir o URL codificado e pressionar Enter ou espaço para acionar a ação correspondente.
  • No Console, para reduzir a confusão, os links que levam a scripts que não estão mais disponíveis para o Desenvolvedor agora estão esmaecidos e não podem ser clicados.
  • Nas árvores de navegação, como a de Origens > Página, a tecla Enter agora expande e recolhe nós com filhos.

Problemas do Chromium: 1338391, 1500662, 1420362.

Destaques diversos

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

  • Desempenho. Se uma gravação falhar, agora você tem a opção de Fazer o download de eventos de rastreamento brutos e tentar descobrir o que deu errado (commit).
  • O atalho Mostrar console (Ctrl+` para Mac, Ctrl++ para Windows e Linux) agora não apenas abre o console, mas também o fecha quando pressionado pela segunda vez.
  • Recursos para desenvolvedores. Foi corrigido um bug que impedia o envio de relatórios sobre recursos CSS e os problemas deles (1420362).
  • Elementos:
    • Correção de um bug na inspeção de elementos em iframes (1453375).
    • Computada. Correção de um bug que impedia a renderização de valores padrão (1499882).
    • Search. Foi corrigido um bug que impedia o cálculo do número de correspondências para consultas curtas de um ou dois caracteres (1416457).
  • Console. Agora, as expressões regulares que terminam com um caractere de escape na caixa Filtro são analisadas corretamente (1346936).
  • Configurações > Espaço de trabalho. Correção de um bug que impedia a adição de uma pasta excluída (1503580).
  • Rede > Visualização. Agora renderiza imagens com URIs data: (1381791).
  • Memória. Foram adicionados botões de e adequados à barra de ações (1275407).

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.