O que há de novo no DevTools (Chrome 98)

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos

Interessado em ajudar a melhorar o DevTools? Inscreva-se para participar da Pesquisa de usuário do Google.

Prévia de funcionalidade: Árvore de acessibilidade da página

A nova Árvore de acessibilidade da página facilita a obtenção de uma visão geral da árvore de acessibilidade da página e irá ajudar a entender melhor como seu conteúdo da web é exposto à tecnologia assistiva.

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

Clique nele para alternar para a visualização Árvore de acessibilidade da página. Você pode expandir os nós ou clicar para ver os detalhes no painel Acessibilidade.

Anteriormente, a árvore de acessibilidade estava disponível no painel Acessibilidade. A visualização era limitada, apenas permitindo explorar um único nó e seus ancestrais.

Nossa equipe ainda está trabalhando ativamente neste recurso de visualização. Queremos seu feedback para mais melhorias!

Árvore de acessibilidade da página

Issue Relacionada: 887173

Alterações mais precisas na guia Alterações

As alterações de código na guia Alterações são impressas automaticamente.

Anteriormente, 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 Alterações

Issues Relacionadas: 1238818, 1268754 , 1086491

Defina um tempo limite mais longo para a gravação do 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ções longas.

Por exemplo, foi gravado um fluxo de usuário nesta página de demonstração para carregar e clicar no item do menu. No entanto, o carregamento dos itens do menu é lento (demora 6 segundos). O replay deste 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 Adicione tempo limite e defina-o como 6000 milissegundos (igual a 6s).

Opcionalmente, você pode 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. Configurações de tempo limite para gravação de fluxo do usuário

Issue Relacionada: 1257499

Verifique se suas páginas podem ser armazenadas em cache com a guia Cache Voltar/Avançar

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

A nova guia Cache de retorno/avanço pode ajudar você a testar suas páginas para garantir que elas sejam otimizadas para bfcache e identificar quaisquer problemas que possam estar impedindo que elas sejam qualificadas.

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

Como desenvolvedores da web, é fundamental saber como otimizar suas páginas para 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.

Cache de retorno/avanço

Issue Relacionada: 1110752

Novo filtro do painel Propriedades

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

Por padrão, as propriedades cujo valor é null ou undefined não são mostradas. Ative a caixa de seleção Mostrar tudo para visualizar todas as propriedades.

Estas melhorias permitem chegar mais rapidamente às propriedades de que está analisando e, assim, melhorar a sua produtividade!

Filtro do painel Propriedades

Issue Relacionada: 1269674

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

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

Abra o Menu de comando, execute o comando Mostrar renderização e defina a lista suspensa Emular cores forçadas do recurso de mídia CSS.

Recurso de mídia de cores forçadas CSS

Issue Relacionada: 1130859

Mostrar réguas no comando hover

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

Anteriormente, você só poderia ativar as réguas de página por meio da caixa de seleção Configurações > Mostrar réguas.

Mostrar réguas no comando hover

Issue Relacionada: 1270562

Suporte row-reverse e column-reverse no editor Flexbox

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

Editor Flexbox

Issue Relacionada: 1263866

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

Atalhos de teclado para reproduzir XHR no painel Rede

Selecione uma solicitação de XHR no painel Rede e pressione R no teclado para reproduzir o XHR. Anteriormente, você só podia reproduzir o XHR através do menu de contexto (clique com o botão direito do mouse > Replay XHR)

Replay XHR

Issue Relacionada: 1050021

Keyboard shortcut to expand all search results

Atalho de teclado para expandir todos os resultados da pesquisa

Um novo atalho é adicionado à guia Pesquisar, permitindo expandir e recolher todos os resultados da pesquisa. Anteriormente, você só podia expandir e recolher os resultados da pesquisa clicando em um arquivo por vez.

Abra a guia de pesquisa no menu Esc > 3 pontos > Pesquisar. Insira uma string de pesquisa (por exemplo, função) e pressione Enter para ver a lista de resultados da pesquisa. Analise nos resultados da pesquisa e use o seguinte atalho para expandir/recolher os arquivos de pesquisa:

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

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

Issue Relacionada: 1255073

Lighthouse 9 no painel Lighthouse

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

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

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

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

Issue Relacionada: 772558

Painel de fontes melhorado

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

  • Significativamente mais rápido ao abrir arquivos grandes (por exemplo, WASM, JavaScript)
  • Não há mais rolagem aleatória ao percorrer o código
  • Sugestões de preenchimento automático aprimoradas para fontes editáveis (por exemplo, snippets, substituição local)

Issue Relacionada: 1241848

Destaques diversos

Estas são algumas correções dignas de nota nesta versão:

  • Exibindo corretamente o diagrama em cascata de solicitações de rede. Anteriormente, o estilo estava quebrado. (1275501)
  • O destaque do código foi quebrado ao pesquisar em documentos com linhas muito longas no painel Fontes. Agora está corrigido. (1275496)
  • Não há mais guia duplicada Carga nas solicitações de rede. (1273972)
  • Corrigidos os detalhes de mudanças de layout ausentes na seção Resumo do painel Desempenho. (1259606)
  • Suporta caracteres arbitrários (por exemplo, ,, .), em consultas de Pesquisa de rede. (1267196)

[Experimental] Endpoints no painel API de relatórios

Para ativar a experiência, marque a caixa de seleção Ativar painel da API de relatórios no painel do aplicativo em Configurações > Experiências.

O painel experimental API de relatórios foi introduzido no Chrome 96 para ajudar você a monitorar os relatórios gerados em 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.

Aprenda a usar a API de relatórios para monitorar violações de segurança, chamadas de API obsoletas e muito mais.

Painel API de relatórios

Issue Relacionada: 1200732

Baixe os canais de prévia

Considere usar o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de prévia fornecem acesso aos recursos do DevTools mais recentes, testam nas últimas APIs da plataforma web lançadas e encontram problemas em seu site antes que seus usuários o façam!

Entre em contato com a equipe Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças nesse artigo ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou comentários para nós pelo crbug.com.
  • Relate um problema de DevTools usando o More options   More   > Help > Report a DevTools issues em DevTools.
  • Mande um tweet para @ChromeDevTools.
  • Deixe comentários em nossos vídeos "What's new in DevTools" no YouTube.

Mais recursos do DevTools

Consulte a versão em inglês do What's New In DevTools para uma lista completa dos recursos lançados. Abaixo estão alguns conteúdos que foram traduzidos para o português.

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.