Novidades no DevTools (Chrome 121)

Barra de filtro simplificada no painel "Rede"

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 nessa versão, mas será revertido. Acompanhe o progresso em crbug.com/1523150.

A nova barra de filtros tem dois menus suspensos: um para escolher tipos de solicitação e outro para ocultar dados e URLs de extensão ou mostrar apenas cookies e solicitações bloqueados, além de solicitações de terceiros. Os dois menus aceitam seleção múltipla.

Para trazer de volta a barra de filtros antiga imediatamente, desative settings Configurações > Experiências > check_box_outline_blank Redesign da barra de filtros no painel "Rede".

Deixe seu feedback sobre o recurso em crbug.com/1500573 (em inglês).

Problema do Chromium: 1486431.

Melhorias nos elementos

Suporte a @font-palette-values

O painel "Elementos" agora é compatível com a regra at @font-palette-values do CSS. Ele permite personalizar os valores padrão da propriedade font-palette.

Em Estilos, clique no valor da propriedade font-palette. As DevTools vão levar você à seção dedicada @font-palette-values, onde é possível editar seus valores personalizados.

Problema do Chromium: 1501781.

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

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

Problema do Chromium: 1499265.

Melhoria no suporte a mapas de origem

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

As DevTools usam mapas de origem para permitir que você depure seu código original em Fontes e Escopo mesmo depois de combinar, minificar ou compilar. Com esse experimento, você pode avaliar seus nomes de variáveis originais de maneira consistente no DevTools, incluindo, entre outros:

• Expressões no Console e sugestões de preenchimento automático

  

• Expressões dinâmicas

  

• Inspecionar expressões

  

• Pontos de interrupção condicionais e pontos de registro

  

Para mais detalhes, consulte a RFC correspondente.

Problema do Chromium: 1444349.

Melhorias no painel de desempenho

Acompanhamento de interações otimizadas

A seção Performance > Interações rastreia bigodes que indicam atrasos de entrada e apresentação nos limites de tempo de processamento.

Além disso, quando você passa o cursor sobre uma interação, uma dica útil mostra os detalhes dos tempos.

Problema do Chromium: 1495751.

Filtragem avançada nas guias "De baixo para cima", "Árvore de chamadas" e "Registro de eventos"

As guias De baixo para cima, Árvore de chamadas e Registro de eventos no painel Performance receberam três novos botões para filtragem avançada:

• match_case Diferenciar maiúsculas de minúsculas.
• regular_expression Expressão regular.
• match_word Fazer a correspondência da palavra inteira.

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

Problema do Chromium: 1496355.

Marcadores de indentação no painel "Origens"

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

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.

Problema do Chromium: 1469776.

Novas opções no menu de comandos 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 comando Adicionar abre a 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 é removido

A guia experimental Violações de CSP, lançada na versão 89, foi removida por ser redundante.

Para conferir os detalhes da CSP rapidamente, acesse Application > Frames > Content Security Policy (CSP).

Além disso, o painel Problemas informa violações de CSP.

Lighthouse 11.3.0

O painel Lighthouse agora executa o Lighthouse 11.3.0. Confira a lista completa de mudanças. Entre as mudanças notáveis, está a capacidade de gerar relatórios sobre 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 a tecla Tab para focar nos botões Ver origem e Ver codificado por 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 Fontes > 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 nesta 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 fecha quando pressionado uma segunda vez.
• Recursos para desenvolvedores. Foi corrigido um bug que impedia a geração de relatórios sobre recursos CSS e problemas relacionados (1420362).
• Elementos:
  • Correção de um bug na inspeção de elementos em iframes (1453375).
  • Calculado. 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 analisa corretamente as expressões regulares que terminam com um caractere de escape na caixa Filtro (1346936).
• Configurações > Workspace. Foi corrigido um bug que impedia a adição de uma pasta excluída (1503580).
• Rede > Visualizar. Agora renderiza imagens com URIs data: (1381791).
• Memória. Adição dos botões upload e download adequados à barra de ações (1275407).

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.