Novidades do DevTools (Chrome 77)

Kayce Basques
Kayce Basques
X GitHub Falha

Copiar estilos do elemento

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

Copiar estilos.

Figura 1. Copiar estilos de elementos.

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

Visualizar mudanças de layout

Suponha que você esteja lendo um artigo de notícias no seu site favorito. Ao ler a página, você continua perdendo o lugar porque o conteúdo está pulando. Esse problema é chamado de deslocamento 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. Por isso, 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.

Agora, o DevTools pode ajudar a detectar a mudança de layout:

  1. Abra o Command Menu.
  2. Comece a digitar Rendering.
  3. Execute o comando Show Rendering.
  4. Marque a caixa de seleção Regiões de troca de layout. À medida que você interage com uma página, as mudanças de layout são realçadas em azul.

Uma mudança de layout.

Figura 2. Uma mudança de layout.

Problema 961846 do Chromium (em inglês)

Lighthouse 5.1 no painel "Audits"

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

A nova interface do painel "Audits".

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

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

  • Orçamentos de performance. Para evitar que o site regrida ao longo do tempo, especifique contagens de solicitações e tamanhos de arquivo que as páginas não podem exceder.
  • Plug-ins. Estenda o Lighthouse com suas próprias auditorias personalizadas.
  • Pacotes de pilhas. Adicione auditorias personalizadas para pilhas de tecnologia específicas. O WordPress Stack Pack foi enviado primeiro. Os pacotes de pilha do React e do AMP estão em desenvolvimento.

Sincronização do tema do SO

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

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 de fontes para abrir o Editor de pontos de interrupção. Use o Editor de pontos de interrupção para criar logpoints e pontos de interrupção condicionais.

O editor de pontos de interrupção.

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

Cache de pré-busca no painel de rede

A coluna Tamanho do painel de rede agora mostra (prefetch cache) quando um recurso é carregado do cache de pré-busca. A pré-busca é um recurso novo da plataforma da Web para acelerar os carregamentos de página posteriores. O site Can I use… (em inglês) informa que o recurso é compatível com 83,33% dos navegadores globais desde julho de 2019.

A coluna "Tamanho" mostra que os recursos vieram do cache de pré-busca.

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

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

Problema do Chromium 935267

Propriedades particulares ao visualizar objetos

Agora o console mostra campos de classe privada nas visualizações de objetos.

Ao inspecionar um objeto, o console agora mostra campos particulares, como "#color".

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 notificações e mensagens push. 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 nos recursos de busca em segundo plano e sincronização em segundo plano do Chrome 76, quando você começa a gravar, as notificações e mensagens push nessa página são gravadas por três dias, mesmo quando a página está fechada e mesmo quando o Chrome está fechado.

Os novos painéis "Notificações" e "Mensagens push".

Figura 7. Os novos painéis "Push messages" e "Notifications" no painel "Application".

Problema do Chromium 927726

Fazer o download dos canais de visualização

Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

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.

Novidades no DevTools

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