Atualização Google Chrome 86 Dev Tools

O Google Chrome 86, com lançamento previsto para 6 de outubro de 2020, apresentará uma versão atualizada das Ferramentas de Desenvolvimento. A atualização apresenta novos recursos que estendem a utilidade da ferramenta. Os editores serão capazes de depurar vídeo em um novo painel de mídia facilmente acessível, ter acesso a mais emuladores e aproveitar as melhores auditorias do Lighthouse para o 6.2.

Painel de novas mídias

As ferramentas de desenvolvimento do Chrome agora apresentam um painel de mídia que permite depurar vídeos.

Instruções passo a passo sobre como acessar o painel de mídia:

1. Clique nos três pontos que mostram mais opções.
2. Selecione mais ferramentas
3. Escolha Mídia para exibir a nova ferramenta de depuração de vídeo.

O novo painel de mídia permitirá que você inspecione propriedades, eventos, mensagens e linha do tempo.

De acordo com o Google:

“A guia Propriedades exibe as propriedades do reprodutor de mídia.

Clique na guia Eventos para ver todos os eventos do media player.

Clique na guia Mensagens para ver os registros de mensagens do media player. Você pode filtrar as mensagens por nível de log ou string.

A guia Timeline é onde você pode ver a reprodução de mídia e o status do buffer ao vivo. ”

Capture Node Screenshots

Agora você pode fazer capturas de tela de nós específicos por meio de um menu suspenso contextual no painel Elementos.

Emular fontes locais ausentes

Quando ativado, este recurso irá ignorar as fontes em sua máquina e se comportar como se elas estivessem faltando. Isso faz com que a ferramenta dev busque a fonte da mesma forma que um novo visitante faria, permitindo que você depure o processo.

Emular dados preferenciais reduzidos

Esta é uma configuração que pode emular um visitante do site que tem uma preferência de navegador definida para o modo de economia de dados. A consulta de mídia CSS preferencial de dados reduzidos pode mostrar uma imagem menor.

Este é um recurso experimental.

O W3c notou preocupações de que esse recurso pudesse ser usado para identificar usuários de baixa renda.

“Esse recurso pode ser uma fonte indesejada de impressão digital, com tendência para baixa renda com dados limitados. Uma seção de privacidade e segurança deve ser adicionada a esta especificação, e deve abordar essa preocupação. <https://github.com/w3c/csswg-drafts/issues/4832> “

Esta consulta de mídia terá suporte do Chrome 85 em diante, incluindo o Microsoft Edge baseado no Chrome.

Ao habilitar essa emulação, um editor pode visualizar e depurar o comportamento da página da web para essas situações.

Atualizações no Lighthouse

Esta atualização adiciona várias correções e melhorias.

Estas são algumas das melhorias de acordo com o Google:

1. “Evite tarefas de thread principal longas. Relata as tarefas mais longas no thread principal, útil para identificar os piores contribuidores para o atraso de entrada.
2. Os links são rastreáveis. Verifique se o atributo href dos elementos âncora vincula a um destino apropriado, para que os links possam ser descobertos.
3. Elementos de imagem sem tamanho – Verifique se uma largura e altura explícitas são definidas nos elementos de imagem. O tamanho explícito da imagem pode reduzir as mudanças de layout e melhorar o CLS.
4. Evite animações não compostas. Relata animações não compostas que parecem irregulares e reduzem o CLS.
5. Escuta os eventos de descarregamento. Relata o evento de descarregamento. Considere usar os eventos pagehide ou visibilitychange em vez disso, pois o evento unload não dispara de forma confiável. ”

O texto acima é apenas uma lista parcial e explicação das diferentes mudanças. Existem outras melhorias, como suporte para novos recursos de JavaScript .

Para ter maiores informações sobre essas atualizações acesse o anúncio oficial.