Novidades no DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Barra de filtro simplificada no painel "Network"

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

O experimento correspondente foi ativado por padrão nessa 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 solicitações e cookies bloqueados e solicitações de terceiros. Os dois menus aceitam a seleção múltipla.

Para recuperar a barra de filtro antiga imediatamente, desative as configurações Configurações > Experimentos > check_box_outline_blank Reformulação da barra de filtro no painel Network.

O antes e o depois de simplificar a barra de filtro no painel "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 "Elementos" agora é compatível com o CSS @font-palette-values em regra. Ela permite personalizar os valores padrão da propriedade font-palette.

Em Styles, clique no valor da propriedade font-palette. O DevTools leva à seção dedicada do @font-palette-values, onde você pode editar seus valores personalizados.

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

Problema do Chromium: 1501781.

Caso compatível: propriedade personalizada como substituta de outra propriedade personalizada

Elementos > Os estilos agora resolvem uma propriedade personalizada que é substituta de outra propriedade personalizada.

O antes e o depois de resolver uma propriedade personalizada como substituta de outra.

Problema do Chromium: 1499265.

Compatibilidade aprimorada com mapas de origem

As configurações Configurações > Experimentos > check_box A opção Resolver nomes de variáveis em expressões usando mapas de origem está ativada por padrão.

O DevTools usa mapas de origem para permitir que você depure seu código original em Sources e Scope mesmo depois de ele ter sido combinado, minificado ou compilado. Esse experimento permite que você avalie os nomes de variáveis originais de forma consistente no DevTools, incluindo, mas não se limitando a:

Para mais detalhes, consulte o RFC correspondente.

Problema do Chromium: 1444349.

Melhorias no painel de desempenho

Faixa de interações aprimoradas

A página Desempenho > A faixa Interações tem bigodes que indicam atrasos de entrada e apresentação nos limites de tempo de processamento.

O antes e depois de adicionar os bigodes à faixa "Interactions".

Além disso, ao passar o cursor sobre uma interação, você verá uma dica útil que detalha os tempos.

Problema do Chromium: 1495751.

Filtragem avançada nas guias Abaixo para cima, Árvore de chamadas e Log de eventos

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 Diferenciar maiúsculas de minúsculas.
  • regular_expression Expressão regular.
  • match_word Corresponde à palavra inteira.

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

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

Problema do Chromium: 1496355.

Marcadores de recuo no painel "Sources"

Para sua conveniência, o Editor no painel Sources agora marca os blocos de código recuados com linhas verticais.

O antes e o depois da marcação de blocos de código recuados com linhas verticais.

Problema do Chromium: 1479986.

Dicas úteis para cabeçalhos e conteúdo substituídos no painel Rede

O painel Rede agora mostra dicas 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 informam o que foi substituído pelo DevTools.

As novas dicas 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 você pode digitar comandos para adicionar ou remover padrões de bloqueio de solicitações de rede no Menu de comando.

O antes e 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ção de rede.

O experimento de violações da CSP foi removido

A guia experimental Violações da CSP introduzida na versão 89 foi removida por ser redundante.

Para conferir um resumo dos detalhes da CSP, acesse Aplicativo > Frames > Política de Segurança de Conteúdo (CSP).

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

Além disso, o painel Issues informa violações da CSP.

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

Lighthouse versão 11.3.0

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

Para aprender os conceitos básicos do uso do painel Lighthouse no 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 você pode focar na guia nos botões Exibir código-fonte e Visualizar código do URL 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 Debugger agora estão esmaecidos e não podem ser clicados.
  • Em árvores de navegação, como a árvore em Origens > Page, a tecla Enter agora expande e recolhe os nós com filhos.

Problemas do Chromium: 1338391, 1500662 e 1420362.

Destaques diversos

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

  • Desempenho. Se uma gravação falhar, agora você terá a opção de Fazer o download de eventos de rastreamento brutos e tentar descobrir o que deu errado (confirmação).
  • O atalho Mostrar console (Ctrl+` no Mac e Ctrl++ no Windows e no Linux) agora não apenas abre o Console, mas também fecha quando pressionado pela segunda vez.
  • Recursos para desenvolvedores. Correção de um bug que impedia relatórios de recursos CSS e os problemas deles (1420362).
  • Elementos:
    • Correção de um bug com a inspeção de elementos em iframes (1453375).
    • Calculado. Correção de um bug que impedia a renderização de valores padrão (1499882).
    • Search. Correção de 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 são analisadas corretamente na caixa Filtro (1346936).
  • Configurações > Workspace. 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. Os botões upload e download corretos foram adicionados à barra de ações (1275407).

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 pré-lançamento dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!

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.

  • Envie uma sugestão ou feedback pelo site crbug.com.
  • Informe um problema do DevTools usando Mais opções   Mais > Ajuda > Relate problemas no DevTools no DevTools.
  • Tuíte em @ChromeDevTools.
  • Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

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