| layout | title | authors | date | updated | description | hero | alt | tags | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
layouts/blog-post.njk |
O que há de novo no DevTools (Chrome 98) |
|
2022-01-13 |
2022-01-13 |
Árvore de acessibilidade da página, alterações mais precisas na guia Alterações, e mais. |
image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ko8jGKESqaHtmmPh0faC.jpg |
|
Tradução realizada por Alvaro Camillo Neto. Revisão por Lucas Santos
{% Partial 'devtools/banner.md' %}
{% YouTube id='YqkIS88VulM' %}
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!
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/o4BY07JabERFd6OieU8b.png", alt="Árvore de acessibilidade da página", width="800", height="505" %}
Issue Relacionada: 887173
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/aup2bT490dkvuBu3o4DS.png", alt="Guia Alterações", width="800", height="450" %}
Issues Relacionadas: 1238818, 1268754 , 1086491
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. {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/y7RDpIp3pd2n6Vnxc5Du.png", alt="Configurações de tempo limite para gravação de fluxo do usuário", width="800", height="530" %}
Issue Relacionada: 1257499
Verifique se suas páginas podem ser armazenadas em cache com a guia Cache Voltar/Avançar {: #bfcache }
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/4OrWjuRgG1bB0AupcMmS.png", alt="Cache de retorno/avanço", width="800", height="516" %}
Issue Relacionada: 1110752
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!
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/ewmNloO4ohRxlWRNuEW1.png", alt="Filtro do painel Propriedades", width="800", height="505" %}
Issue Relacionada: 1269674
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/75qGjkzfbXfOEJUhML5i.png", alt="Recurso de mídia de cores forçadas CSS", width="800", height="623" %}
Issue Relacionada: 1130859
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/FLF6RWO2bm5SMksdayLv.png", alt="Mostrar réguas no comando hover", width="800", height="591" %}
Issue Relacionada: 1270562
O editor Flexbox adicionou dois novos botões para suportar row-reverse e column-reverse em flex-direction.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/JHI4frP4MqaydXk19sq2.png", alt="Editor Flexbox", width="800", height="546" %}
Issue Relacionada: 1263866
Novos atalhos de teclado para reproduzir XHR e expandir todos os resultados da pesquisa {: #shortcuts }
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)
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/M3s35wS3A0OoKMeubzMx.png", alt="Replay XHR", width="800", height="530" %}
Issue Relacionada: 1050021
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.
{% Video src="video/dPDCek3EhZgLQPGtEG3y0fTn4v82/v11XfQLwp7w9qIk440QP.mp4", autoplay="true", muted="false", loop="true", class="screenshot" %}
Issue Relacionada: 1255073
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.
{% Img src="image/MtjnObpuceYe3ijODN3a79WrxLU2/gZI1flmYHuUpF637Idzy.png", alt="Uma auditoria do Lighthouse para 'Todos os elementos focalizáveis devem ter um 'id' exclusivo, mostrando dois elementos, ambos com o mesmo 'id'", width="800", height="380", class="screenshot" %}
Issue Relacionada: 772558
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
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)
{% Aside %}
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. {% endAside %}
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.
{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/D1fUz4zuS1xwDbszgft1.png", alt="Painel API de relatórios", width="800", height="560" %}
Issue Relacionada: 1200732
{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}