Novidades do DevTools (Chrome 98)

Jecelyn Yeen

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 a entender melhor como o 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 as ferramentas e um novo botão de acessibilidade vai aparecer no painel Elements.

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 volte 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ó do DOM e o nó da árvore de acessibilidade. Isso também funciona para a visualização em árvore da acessibilidade ⬌ da árvore do DOM.

Antes, a árvore de acessibilidade estava disponível no painel Acessibilidade. A visualização é limitada e permite explorar apenas um nó e seus ancestrais.

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

Árvore de acessibilidade de página inteira

Problema do Chromium: 887173

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

As mudanças de código na guia Changes são mostradas de forma bonita automaticamente.

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

Guia "Mudanças"

Problemas do Chromium: 1238818, 1268754 e 1086491

Definir um tempo limite mais longo para a gravação do fluxo de usuários

Agora é possível 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 6 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 clicando em Adicionar tempo limite e defina o valor como 6000 milissegundos (igual a 6 segundos).

Você também pode ajustar o Tempo limite nas Configurações de repetição para todas as etapas. Abra as Configurações de repetição e edite o valor Tempo limite.

configurações de tempo limite para a gravação do fluxo do usuário

Problema do Chromium: 1257499

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

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

A nova guia Cache de ida/volta pode ajudar a testar suas páginas para garantir que elas sejam otimizadas para o bfcache e identificar problemas que possam impedir 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 Test back/forward cache. As Ferramentas para desenvolvedores vão tentar acessar outra página e voltar à página em questão para determinar se ela pode ser restaurada do bfcache.

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

Guia "Cache de avanço e retorno"

Problema do Chromium: 1110752

Novo filtro do painel de propriedades

Se você quiser se concentrar em uma propriedade específica no painel Propriedades, agora é possível digitar o nome ou valor da propriedade 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 acessar todas as propriedades.

Com essas melhorias, você acessa as propriedades mais importantes mais rapidamente e aumenta a produtividade.

Filtro do painel de propriedades

Problema do Chromium: 1269674

Emular o recurso de mídia "CSS forced-colors"

O recurso de mídia CSS forced-colors é usado para detectar se o agente do usuário ativou um modo de cores forçado (por exemplo, o modo de alto contraste do Windows), em que ele aplica 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.

Recurso de mídia CSS forced-colors

Problema do Chromium: 1130859

Mostrar réguas no comando de passar o cursor

Agora você pode abrir o Command Menu e executar o comando Show rulers on hover. As réguas da 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 na caixa de seleção Configurações > Mostrar réguas.

Mostrar réguas ao passar o cursor

Problema do Chromium: 1270562

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

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

Editor Flexbox

Problema do Chromium: 1263866

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

Atalhos de teclado para reproduzir XHR no painel "Rede"

Selecione uma solicitação XHR no painel Rede e pressione R no teclado para reproduzir o XHR. Antes, só era possível reproduzir o XHR pelo menu de contexto (clique com o botão direito do mouse > Replay XHR).

XHR de repetição

Problema do Chromium: 1050021

Atalho de teclado para abrir todos os resultados da pesquisa

Um novo atalho foi adicionado à guia Pesquisar, permitindo expandir e recolher todos os resultados da pesquisa. Antes, só era possível expandir e recolher os resultados da pesquisa clicando em um arquivo por vez.

Abra a guia de pesquisa clicando em Esc > menu de três pontos > Pesquisar. Insira 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 de teclado para consultar os 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 as Novidades do Lighthouse 9.0 para mais detalhes sobre as atualizações.

​Uma auditoria do Lighthouse para "Todos os elementos focalizáveis precisam ter um "id" exclusivo, mostrando dois elementos, ambos com o mesmo "id"

Problema do Chromium: 772558

Painel "Origens" aprimorado

Melhorias de estabilidade no painel Fontes, já que fizemos upgrade para usar o CodeMirror 6. Confira algumas melhorias importantes:

  • Muito mais rápido ao abrir arquivos grandes (por exemplo, WASM, JavaScript)
  • Chega de rolagem aleatória ao navegar pelo código.
  • Melhorias nas sugestões de preenchimento automático para origens editáveis (por exemplo, snippets, substituição local)

Problema do Chromium: 1241848

Destaques diversos

Confira algumas correções importantes desta 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. O problema foi corrigido. (1275496).
  • A guia Payload não é mais duplicada nas solicitações de rede. (1273972).
  • Corrigimos os detalhes de mudança de layout ausentes na seção Resumo do painel Performance. (1259606).
  • Suporte a caracteres arbitrários (por exemplo, ,, .) 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. Ela mostra uma visão geral de todos os endpoints configurados no cabeçalho Reporting-Endpoints.

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

Painel da API Reporting

Problema do Chromium: 1200732

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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

Novidades no DevTools

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