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

Á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 Alterações são exibidas automaticamente.

Anteriormente, era difícil rastrear as alterações 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 , 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.

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

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 pode ajudar você a testar suas páginas para 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.

Guia do cache de avanço e retorno

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!

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

Mostrar réguas ao passar o cursor

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.

Editor Flexbox

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

reproduzir 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 pressionando Esc > menu de 3 pontos > Pesquisar. 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.

​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

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).
  • Ofereça 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. 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é-visualização 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.
  • Para informar um problema do DevTools, use Mais opções   Mais   > Ajuda > Informar problemas do 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59