Novidades do DevTools (Chrome 77)

Kayce Basques

Copiar estilos de elementos

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

Figura 1. Copie estilos de elementos.

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

Visualizar trocas de layout

Suponha que você esteja lendo um artigo de notícias no seu site favorito. Ao ler a página, você perde o foco porque o conteúdo fica pulando. Esse problema é chamado de mudança de layout. Isso geralmente acontece quando as imagens e os anúncios terminam de carregar. A página não reservou espaço para as imagens e os anúncios, então o navegador precisa mover todo o outro conteúdo para baixo para abrir espaço para eles. A solução é usar marcadores de posição.

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

1. Abra o Command Menu (link em inglês).
2. Comece a digitar Rendering.
3. Execute o comando Mostrar renderização.
4. Marque a caixa de seleção Regiões de troca de layout. Ao interagir 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 "Auditorias"

O painel "Auditorias" agora executa 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 as contagens de solicitações e os tamanhos de arquivo baixos. Informa o número total de solicitações de rede e os tamanhos de arquivo de várias categorias, como documentos, scripts, folhas de estilo, imagens etc.
• Possível latência máxima na primeira entrada. Mede o tempo máximo potencial entre a primeira interação de um usuário com a página e a resposta do navegador a essa interação. Essa métrica substitui a métrica "Latência de entrada estimada". A possível latência máxima na primeira entrada não é considerada na pontuação da categoria "Performance".

Figura 3. A nova interface do painel "Auditorias".

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

• Orçamentos de performance. Evite que seu site regrida com o tempo especificando contagens de solicitações e tamanhos de arquivo que as páginas não devem exceder.
• Plug-ins. Estenda o Lighthouse com suas próprias auditorias personalizadas.
• Stack Packs. Adicione auditorias adaptadas a stacks de tecnologia específicas. O pacote de pilha do WordPress foi enviado primeiro. Os Stack Packs do React e do AMP estão em desenvolvimento.

Sincronização de temas do SO

Se você estiver usando o tema escuro do SO, o DevTools vai mudar automaticamente para o próprio tema escuro.

Atalho do 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 Fontes para abrir o Editor de pontos de interrupção. Use o Editor de pontos de interrupção para criar pontos de registro e pontos de interrupção condicionais.

Figura 4. O Editor de pontos de interrupção.

Cache de pré-busca no painel de rede

A coluna Tamanho do painel "Rede" agora mostra (prefetch cache) quando um recurso é carregado do cache de pré-busca. A pré-busca é um recurso relativamente novo da plataforma da Web para acelerar os carregamentos de páginas subsequentes. O site Can I use... (em inglês) informa que ele é 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 de (prefetch cache).

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

Problema do Chromium nº 935267

Propriedades particulares ao visualizar objetos

Agora, o console mostra campos de classe particulares nas prévias de objetos.

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

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

A seção "Serviços em 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 os recursos de busca e sincronização em segundo plano do Chrome 76, depois que você começa a gravar, as mensagens e notificações push nesta página são gravadas por três dias, mesmo quando a página ou o Chrome estão fechados.

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

Problema do Chromium nº 927726

Baixar os canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.

• Envie feedback e solicitações de recursos para crbug.com.
• Relate um problema do DevTools usando more_vert Mais opções > Ajuda > Relatar um problema do DevTools.
• Envie um tweet para @ChromeDevTools.
• Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.