Novidades do DevTools (Chrome 78)

Kayce Basques

Suporte a vários clientes no painel "Auditorias"

Agora você pode usar o painel Auditorias em combinação com outros recursos do DevTools, como Bloqueio de solicitações e Substituições locais.

Por exemplo, suponha que o relatório do painel Auditorias diga que a pontuação de performance da sua página é 70 e uma das maiores oportunidades de melhoria é eliminar recursos que bloqueiam a renderização.

Figura 1. A pontuação inicial de performance.

Figura 2. O relatório inicial diz que três scripts de bloqueio de renderização são um problema.

Agora que o painel Auditorias pode ser usado em combinação com o bloqueio de solicitações, é possível medir rapidamente o quanto os scripts de bloqueio de renderização afetam o desempenho do carregamento. Para isso, primeiro bloqueie as solicitações dos scripts de bloqueio de renderização:

Figura 3. Usando a guia Bloqueio de solicitações para bloquear os scripts problemáticos.

E depois faça a auditoria da página novamente:

Figura 4. A pontuação de Performance melhorou para 97 depois que os scripts problemáticos foram bloqueados.

Como alternativa, você pode usar Substituições locais para adicionar atributos async a cada uma das tags de script, mas "vamos deixar isso como um exercício para o leitor". Confira este tweet para ver uma demonstração em vídeo.

Problema do Chromium nº 991906

Depuração do gerenciador de pagamentos

A seção Serviços em segundo plano do painel Aplicativo agora é compatível com eventos do Payment Handler.

1. Acesse o painel Application.
2. Abra o painel Gerenciador de pagamento.

3. Clique em Gravar. O DevTools registra eventos do Payment Handler por três dias, mesmo quando está fechado.

   

   Figura 5. Gravando eventos do Payment Handler.

4. Ative a opção Mostrar eventos de outros domínios se os eventos do Payment Handler ocorrerem em uma origem diferente.

5. Depois de acionar um evento do Payment Handler, clique na linha dele para saber mais.

   

   Figura 6. Visualizar um evento do Payment Handler.

Problema do Chromium nº 980291

Lighthouse 5.2 no painel "Auditorias"

O painel Auditorias agora executa o Lighthouse 5.2. A nova auditoria de diagnóstico Uso de terceiros informa quanto código de terceiros foi solicitado e por quanto tempo ele bloqueou a linha de execução principal durante o carregamento da página. Consulte Otimizar seus recursos de terceiros para saber mais sobre como o código de terceiros pode prejudicar a performance de carregamento.

Figura 7. A auditoria de Uso de terceiros.

Problema 772558 do Chromium

Maior exibição de conteúdo no painel "Performance"

Ao analisar o desempenho de carregamento no painel Performance, a seção Tempos agora inclui um marcador para Largest Contentful Paint (LCP). A LCP informa o tempo de renderização do maior elemento de conteúdo visível na janela de visualização.

Figura 8. O marcador LCP na seção Tempos.

Para destacar o nó DOM associado à LCP:

1. Clique no marcador LCP na seção Tempos.

2. Passe o cursor sobre o Nó relacionado na guia Resumo para destacar o nó na janela de visualização.

   

   Figura 9. A seção Nó relacionado da guia Resumo.

3. Clique em Nó relacionado para selecioná-lo na Árvore DOM.

Relatar problemas do DevTools no menu principal

Se você encontrar um bug no DevTools e quiser registrar um problema ou se tiver uma ideia de como melhorar o DevTools e quiser solicitar um novo recurso, acesse Menu principal > Ajuda > Informar um problema do DevTools para criar um problema no rastreador da equipe de engenharia do DevTools. Fornecer um exemplo mínimo e reproduzível aumenta muito a capacidade da equipe de corrigir seu bug ou implementar seu pedido de recurso.

Ajuda > Informar um problema do DevTools." width="800" height="604">

Figura 10. Menu principal > Ajuda > Relatar um problema do DevTools.

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.