Esta página foi traduzida pela API Cloud Translation.

Novidades no DevTools (Chrome 121)

Sofia Emelianova

Barra de filtro simplificada no painel "Rede"

A barra de filtro foi reformulada para permitir que você filtre solicitações com mais facilidade e organize o painel Network.

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 cookies e solicitações bloqueados, e solicitações de terceiros. Os dois menus são compatíveis com 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 "Rede".

O antes e o depois de otimizar a barra de filtro no painel "Network".

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 at-rule de CSS @font-palette-values. Permite personalizar os valores padrão da propriedade font-palette.

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

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

Problema do Chromium: 1501781.

Caso compatível: propriedade personalizada como um substituto de outra propriedade personalizada

A opção Elementos > Estilos agora resolve uma propriedade personalizada que é um substituto de outra propriedade desse tipo.

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

Problema do Chromium: 1499265

Melhorias no suporte ao mapa de origem

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

O DevTools usa mapas de origem para permitir que você depure o código original em Sources e Scope mesmo depois de combiná-lo, minificá-lo ou compilá-lo. Esse experimento permite avaliar os nomes originais das variáveis de forma consistente no DevTools, incluindo, mas não se limitando a:

Expressões no Console e sugestões de preenchimento automático
Expressões ao vivo
Expressões de observação
Pontos de interrupção condicionais e logpoints

Para mais detalhes, consulte o RFC correspondente.

Problema do Chromium: 1444349.

Melhorias no painel de desempenho

Faixa "Interações otimizadas"

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

o antes e o depois de adicionar bigodes à faixa de interações.

Além disso, quando você passa o cursor sobre uma interação, aparece uma dica útil com os prazos.

Problema do Chromium: 1495751

Filtragem avançada nas guias Bottom-Up, Á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 filtros avançados:

match_case Corresponder maiúsculas e minúsculas.
regular_expression Expressão regular.
match_word Fazer correspondência da palavra inteira.

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

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

Problema do Chromium: 1496355

Marcadores de recuo no painel Origens

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

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

Problema do Chromium: 1479986.

Dicas úteis para conteúdo e cabeçalhos 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 indicam 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

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 o depois de adicionar novos comandos para adicionar ou remover padrões de bloqueio de rede.

O comando Add leva você à caixa de diálogo para especificar o padrão, e o comando Remove remove todos os padrões sem abrir o painel Network request block.

O experimento de violações da CSP foi removido

A guia experimental Violações de CSP introduzida na versão 89 foi removida como redundante.

Para conferir os detalhes da CSP rapidamente, 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 Problemas informa violações da CSP.

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

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 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 tabulação dos botões view source e view URL-encoded e pressionar Enter ou espaço para acionar a ação correspondente.
No Console, para evitar 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 Sources > Page, a tecla Enter agora expande e recolhe nós com filhos.

Problemas do Chromium: 1338391, 1500662 e 1420362.

Destaques diversos

Estas são algumas correções e melhorias importantes 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).
Agora, o atalho Mostrar console (Ctrl+` no Mac e Ctrl++ no Windows e Linux) não apenas abre o Console, mas também fecha ao ser pressionado pela segunda vez.
Recursos para desenvolvedores. Correção de um bug que impedia a geração de 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).
- Computado. 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, analisa corretamente expressões regulares que terminam com um caractere de escape na caixa Filtro (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, imagens com URIs data: são renderizadas (1381791).
Memória. Os botões upload e download adequados 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 oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

Envie uma sugestão ou feedback em crbug.com.
Informe um problema do DevTools em Mais opções > Ajuda > Informar problemas no DevTools.
Envie um tweet em @ChromeDevTools.
Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.