Novidades do DevTools (Chrome 98)

Recurso em pré-lançamento: árvore de acessibilidade de página inteira

A nova árvore de acessibilidade de página inteira facilita a visualização da árvore de acessibilidade de página inteira e ajuda você a entender melhor como seu conteúdo da Web é exposto à tecnologia adaptativa.

No painel Elementos, abra o painel Acessibilidade e marque a caixa de seleção Ativar árvore de acessibilidade de página inteira. Em seguida, recarregue o DevTools para ver um novo botão de acessibilidade no painel Elementos.

Clique nele para alternar para a visualização árvore de acessibilidade de página inteira. É possível expandir os nós ou clicar para conferir detalhes no painel Acessibilidade.

Selecione um nó e alterne de volta para a visualização em árvore do DOM. O nó DOM correspondente está selecionado agora. Essa é uma ótima maneira de entender o mapeamento entre o nó DOM e seu nó de árvore de acessibilidade. Isso também funciona para a árvore do DOM ⬌ na visualização em árvore de acessibilidade.

Antes, a árvore de acessibilidade ficava disponível no painel Acessibilidade. A visualização é limitada e só permite conhecer um único nó e os ancestrais dele.

Nossa equipe ainda está trabalhando nesse recurso em fase de pré-lançamento. Envie seu feedback para mais melhorias.

Problema do Chromium: 887173

Mudanças mais precisas na guia "Mudanças"

As mudanças de código na guia Alterações são exibidas automaticamente.

Antes, era difícil rastrear as mudanças reais no código-fonte reduzido porque todo o código era mostrado em uma única linha.

Problemas do Chromium: 1238818, 1268754 , 1086491

Definir um tempo limite maior para o registro de fluxo do usuário

Agora você pode ajustar as configurações de Tempo limite no Gravador para todas as etapas ou uma etapa específica. Isso é útil especialmente para páginas com solicitações de rede lentas e animação demorada.

Por exemplo, gravei um fluxo do usuário nesta página de demonstração para carregar e clicar no item de menu. No entanto, o carregamento dos itens do menu é lento (leva seis segundos). A reprodução desse fluxo de usuário falhou porque excede 5 segundos (o tempo limite padrão).

Podemos usar as novas configurações de Tempo limite para corrigir isso. Expanda a etapa em que clicamos no item de menu. Edite a etapa em Adicionar tempo limite e defina-a como 6.000 milissegundos (igual a 6 s).

Também é possível ajustar o Tempo limite nas Configurações de repetição para todas as etapas. Expanda as Configurações de repetição e edite o valor de Tempo limite.

Problema do Chromium: 1257499

Verifique se as páginas podem ser armazenadas em cache com a guia "Cache de avanço e retorno"

O cache de avanço e retorno (ou bfcache) é uma otimização de navegador que permite a navegação de retorno e avanço instantânea.

A nova guia Cache de avanço e retorno ajuda a testar suas páginas com o objetivo de garantir que elas estejam otimizadas para o bfcache e identificar problemas que possam estar impedindo a qualificação delas.

Para testar uma página específica, navegue até ela no Chrome e, no DevTools, acesse Application > Cache de avanço e retorno. Em seguida, clique no botão Testar o cache de avanço e retorno e o DevTools tentará navegar para fora e voltar para determinar se a página pode ser restaurada do bfcache.

Como desenvolvedores Web, é fundamental saber como otimizar suas páginas para o bfcache em todos os navegadores, pois isso melhorará significativamente a experiência de navegação dos usuários, especialmente aqueles com redes ou dispositivos mais lentos.

Problema do Chromium: 1110752

Novo filtro do painel "Propriedades"

Se você quiser se concentrar em uma propriedade específica no painel Propriedades, digite o nome ou o valor dela na nova caixa de texto Filtro.

Por padrão, as propriedades com valor null ou undefined não são exibidas. Marque a caixa de seleção Mostrar tudo para exibir todas as propriedades.

Essas melhorias permitem que você acesse as propriedades que quiser com mais rapidez e, assim, aumente a produtividade!

Problema do Chromium: 1269674

Emular o recurso de mídia de cores forçadas do CSS

O recurso de mídia CSS forced-colors é usado para detectar se o user agent ativou um modo de cores forçadas (por exemplo, o modo de alto contraste do Windows) em que ele impõe uma paleta de cores limitada escolhida pelo usuário na página.

Abra o Command Menu, execute o comando Show Rendering e defina o menu suspenso Emulate CSS media feature forced-colors.

Problema do Chromium: 1130859

Mostrar réguas ao passar o cursor

Agora você pode abrir o Menu de comando e executar o comando Mostrar réguas ao passar o cursor. As réguas de página facilitam a medição da largura e da altura de um elemento.

Antes, só era possível ativar as réguas de página em Configurações > Mostrar réguas.

Problema do Chromium: 1270562

Suporte a row-reverse e column-reverse no editor Flexbox

O editor Flexbox adicionou dois novos botões para oferecer suporte a row-reverse e column-reverse em flex-direction.

Problema do Chromium: 1263866

Novos atalhos do teclado para reproduzir o XHR e abrir todos os resultados da pesquisa

Atalhos do teclado para reproduzir o XHR no painel Network

Selecione uma solicitação XHR no painel Rede e pressione R no teclado para reproduzir o XHR. Anteriormente, só é possível reproduzir o XHR por meio do menu de contexto (clique com o botão direito do mouse > Repetir XHR).

Problema do Chromium: 1050021

Atalho de teclado para abrir todos os resultados da pesquisa

Um novo atalho foi adicionado à guia Pesquisa para abrir e fechar todos os resultados da pesquisa. Antes, só era possível abrir e fechar os resultados da pesquisa clicando em um arquivo por vez.

Abra a guia de pesquisa usando a tecla Esc > Menu de três pontos > Pesquisa. Digite uma string de pesquisa (por exemplo, função) e pressione Enter para ver a lista de resultados da pesquisa. Concentre-se nos resultados da pesquisa e use o seguinte atalho para expandir/recolher os arquivos de pesquisa:

• Windows / Linux - Ctrl + Shift + { ou }
• MacOS: Cmd + Options + { ou }

Acesse os atalhos do teclado para referência de atalhos de teclado no Chrome DevTools.

Problema do Chromium: 1255073

Lighthouse 9 no painel do Lighthouse

O painel Lighthouse agora está usando o Lighthouse 9. O Lighthouse agora listará todos os elementos que compartilham o mesmo ID.

O ID de elemento não exclusivo é um problema comum de acessibilidade. Por exemplo, o ID referenciado em um atributo aria-labelledby é usado em vários elementos.

Confira a página O que há de novo no Lighthouse 9.0 para saber mais detalhes sobre as atualizações.

​

Problema do Chromium: 772558

Painel "Origens" aprimorado

Muitas melhorias de estabilidade no painel Sources durante o upgrade para usar o CodeMirror 6. Aqui estão algumas melhorias notáveis:

• Significativamente mais rápido ao abrir arquivos grandes (por exemplo, WASM, JavaScript)
• Chega de rolar aleatórias ao navegar pelo código.
• Sugestões de preenchimento automático aprimoradas para fontes editáveis (por exemplo, snippets, substituição local)

Problema do Chromium: 1241848

Destaques diversos

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

• Exibição adequada do diagrama de cascata das solicitações de rede. Antes, o estilo estava corrompido. (1275501).
• O destaque do código era corrompido ao pesquisar em documentos com linhas muito longas no painel Fontes. Isso já foi corrigido. (1275496).
• Não há mais guias Payload duplicadas nas solicitações de rede. (1273972).
• Corrigimos os detalhes ausentes de mudanças de layout na seção Resumo do painel Desempenho. (1259606).
• É possível usar caracteres arbitrários (por exemplo, , e .) em consultas de Pesquisa de rede. (1267196).

[Experimental] Endpoints no painel da API Reporting

O painel experimental API Reporting foi introduzido no Chrome 96 para ajudar você a monitorar os relatórios gerados na sua página e o status deles.

A seção Endpoints já está disponível. Ele fornece uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints.

Saiba como usar a API Reporting para monitorar violações de segurança, chamadas de API descontinuadas e muito mais.

Problema do Chromium: 1200732

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   > 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.