Novidades do DevTools (Chrome 77)

Kayce Basques

Copiar estilos do elemento

Clique com o botão direito do mouse em um nó da Árvore DOM para copiar o CSS desse nó para a área de transferência.

Figura 1. Copiar estilos de elementos.

Agradecemos a Adam Argyle e VisBug pela inspiração.

Visualizar mudanças de layout

Vamos supor que você esteja lendo uma notícia no seu site favorito. Enquanto lê a página, você continuar se perdendo porque o conteúdo está pulando. Esse problema é chamado de layout mudando. Isso geralmente acontece quando as imagens e os anúncios terminam de carregar. A página não reservou nenhum espaço para as imagens e os anúncios, de modo que o navegador precisa deslocar todo o resto para baixo para abrir espaço para para resolvê-los com rapidez. A solução é usar marcadores de posição.

O DevTools agora pode ajudar a detectar mudanças de layout:

1. Abra o Menu de comando.
2. Comece a digitar Rendering.
3. Execute o comando Show Rendering.
4. Marque a caixa de seleção Layout Shift Regions. À medida que você interage com uma página, as mudanças de layout são destacadas em azul.

Figura 2. Uma troca de layout.

Problema 961846 do Chromium

Lighthouse 5.1 no painel Audits

O painel "Auditorias" agora está executando o Lighthouse 5.1. As novas auditorias incluem:

• Fornece um apple-touch-icon válido. Verifica se um PWA pode ser adicionado a uma tela inicial do iOS.
• Mantenha o número de solicitações e o tamanho de arquivo baixos. Informa o número total de solicitações de rede e tamanhos de arquivo para várias categorias, como documentos, scripts, folhas de estilo, imagens e assim por diante.
• Potencial de atraso máximo da primeira entrada. Mede o potencial máximo de tempo entre a atividade interação da primeira página e a resposta do navegador a essa interação. Essa métrica substitui a métrica "Latência estimada de entrada". A latência máxima da primeira entrada não considera na sua pontuação da categoria de desempenho.

Figura 3. A nova interface do painel de auditorias.

As versões Node e CLI do Lighthouse 5.1 têm três novos recursos principais que valem a pena conferir:

• Orçamentos de performance. Para evitar que seu site retorne ao longo do tempo, especifique a solicitação contagens e tamanhos de arquivo que as páginas não devem ultrapassar.
• Plug-ins. Amplie o Lighthouse com suas próprias auditorias personalizadas.
• Pacotes de pilha. Adicione auditorias adaptadas a pilhas de tecnologia específicas. Pacote de pilha do WordPress enviados primeiro. Os pacotes de pilha de AMP e React estão em desenvolvimento.

Sincronização de temas do SO

Se você estiver usando o tema escuro do SO, o DevTools agora mudará para o tema escuro dele. automaticamente.

Atalho de teclado para abrir o editor de pontos de interrupção

Pressione Control+Alt+B ou Command + Option + B (Mac) quando o foco estiver no Editor do painel "Sources" para abrir o Breakpoint Editor. Use o Breakpoint Editor para criar Logpoints e Pontos de interrupção condicionais.

Figura 4. O editor de ponto de interrupção.

Cache de pré-busca no painel Network

A coluna Tamanho do painel "Rede" agora mostra (prefetch cache) quando um recurso foi carregado de no cache de pré-busca. A pré-busca é um novo recurso da plataforma da Web para acelerar as páginas subsequentes carrega. A página Posso usar... informa que ela era compatível com 83,33% dos navegadores globais desde julho de 2019.

Figura 5. A coluna Tamanho mostra que prefetch2.html e prefetch2.css vieram dos (prefetch cache).

Confira a demonstração da pré-busca para testar.

Problema 935267 do Chromium

Propriedades particulares ao visualizar objetos

O console agora mostra campos de classe particulares nas visualizações de objetos.

Figura 6. A versão antiga do Chrome à esquerda não mostra o campo #color ao inspecionar a objeto, enquanto a nova versão à direita faz.

Notificações e mensagens push no painel "Application"

A seção Serviços de segundo plano do painel Aplicativo agora oferece suporte a mensagens push e Notificações. As mensagens push ocorrem quando um servidor envia informações para um service worker. As notificações ocorrem quando um service worker ou script de página mostra informações ao usuário.

Assim como acontece com os recursos de Busca em segundo plano e Sincronização em segundo plano do Chrome 76, assim que você começar gravação, as mensagens push e as notificações nesta página são gravadas por 3 dias, mesmo quando a página está fechado, e mesmo quando o Chrome está fechado.

Figura 7. Os novos painéis "Mensagens push" e "Notificações" no painel "Aplicativo".

Problema 927726 do Chromium

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 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.
• Informe um problema do DevTools usando Mais opções   > Ajuda > Relate problemas no 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.