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 combiná-lo, minificá-lo ou compilá-lo. Esse experimento permite avaliar 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 De baixo 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. Antes, 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 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 é possível focar na guia nos botões Ver código-fonte e Ver 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 ficam 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, 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.