Novidades do DevTools (Chrome 98)

Jecelyn Yeen

Recurso de visualização: á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 conferir um novo botão de acessibilidade no painel Elements.

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

Selecione um nó e volte à visualização em árvore do DOM. O nó DOM correspondente está selecionado agora. Essa é uma ótima forma de entender o mapeamento entre o nó DOM e o nó da árvore de acessibilidade. Isso também funciona para a árvore do DOM ⬌ A visualização em árvore de acessibilidade.

Anteriormente, a árvore de acessibilidade estava disponível no painel Acessibilidade. A visualização é limitada, ela só permite que você explore um único nó e os ancestrais dele.

Nossa equipe ainda está trabalhando nesse recurso em fase de pré-lançamento. Gostaríamos de receber seu feedback para fazer outras melhorias.

Árvore de acessibilidade de página inteira

Problema do Chromium: 887173

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

As mudanças de código na guia Mudanças são exibidas de maneira automática.

Antes, era difícil rastrear as mudanças reais do código-fonte reduzido 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 maior 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ção longa.

Por exemplo, gravei um fluxo de usuário nesta página de demonstração para carregar e clicar no item de menu. No entanto, o carregamento dos itens de menu é lento (leva 6 segundos). A repetição desse fluxo de usuário falhou porque excede cinco 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. Para editar a etapa, selecione Adicionar tempo limite e defina-a para 6.000 milissegundos (igual a 6s).

Você pode ajustar o tempo limite nas Configurações de repetição de todas as etapas. Expanda as Configurações de repetição e edite o valor Tempo limite.

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

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 avanço e retorno instantânea.

A nova guia Cache de avanço e retorno ajuda a testar se as páginas estão otimizadas para o bfcache e identificar problemas que impedem a qualificação delas.

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

Como desenvolvedor da Web, é fundamental saber como otimizar suas páginas para o bfcache em todos os navegadores. Isso vai melhorar 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 "Propriedades"

Se você quiser focar em uma propriedade específica no painel Propriedades, digite o nome ou 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 conferir todas as propriedades.

Essas melhorias permitem que você acesse as propriedades de que gosta mais rapidamente e, portanto, melhoram sua produtividade!

Filtro do painel de propriedades

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.

Recurso de mídia de cores forçadas do CSS

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. Com as réguas de página, fica mais fácil medir a largura e a 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 a row-reverse e column-reverse no editor do Flexbox

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

Editor do Flexbox

Problema do Chromium: 1263866

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

Atalhos do 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 > Repetir XHR).

repetir XHR

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 de cada vez.

Abra a guia de pesquisa usando 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. Foque 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 no Chrome DevTools.

Problema do Chromium: 1255073

Lighthouse 9 no painel do Lighthouse

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

O ID do 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 precisam ter um "id" exclusivo, mostrando dois elementos, ambos com o mesmo `id`

Problema do Chromium: 772558

Melhorias no painel "Origens"

Muitas melhorias de estabilidade no painel Sources após a atualização para usar o CodeMirror 6. Confira algumas melhorias importantes:

  • 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)

Problema do Chromium: 1241848

Destaques diversos

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

  • Exibição adequada do diagrama de hierarquia das solicitações de rede Anteriormente, o estilo estava corrompido. (1275501).
  • O destaque do código estava 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).
  • Ofereça suporte a caracteres arbitrários (por exemplo, ,, .) em consultas do Network Search. (1267196).

[Experimental] Endpoints no painel da API Reporting

O painel experimental API Reporting foi lançado 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.

Painel da API Reporting

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

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59