Novidades do DevTools (Chrome 78)

Kayce Basques
Kayce Basques

Suporte para vários clientes no painel de auditorias

Agora é possível usar o painel Auditorias com outros recursos do DevTools, como Solicitar bloqueio e modificações locais.

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

A pontuação de desempenho inicial é 70.

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

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

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

Agora que o painel Auditorias pode ser usado com o bloqueio de solicitações, é possível medir o quanto os scripts de bloqueio de renderização afetam o desempenho de carregamento bloqueando Solicitações para os scripts de bloqueio de renderização:

Usar a guia "Bloqueio de solicitações" para bloquear os scripts problemáticos.

Figura 3. Usar a guia Solicitar bloqueio para bloquear os scripts problemáticos.

Em seguida, faça a auditoria da página novamente:

A pontuação de desempenho melhorou para 97 após a ativação do bloqueio de solicitações.

Figura 4. A pontuação de desempenho melhorou para 97 depois do bloqueio dos scripts problemáticos.

Como alternativa, você pode usar Local Overrides para adicionar atributos async a cada script. tags, mas "vamos deixar isso como um exercício para o leitor". Acesse a demonstração de múltiplos clientes para testar para fora. Ou confira este tweet para ver uma demonstração em vídeo.

Problema 991906 do Chromium

Depuração do gerenciador de pagamentos

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

  1. Acesse o painel Aplicativo.
  2. Abra o painel Gerenciador de pagamentos.
  3. Clique em Gravar. O DevTools registra eventos do gerenciador de pagamentos por três dias, mesmo quando fechadas.

    Registrar eventos do gerenciador de pagamentos.

    Figura 5. Gravação de eventos do gerenciador de pagamentos.

  4. Ative Mostrar eventos de outros domínios se os eventos do Gerenciador de pagamentos ocorrerem em outro origem.

  5. Depois de acionar um evento do Gerenciador de pagamentos, clique na linha do evento para saber mais sobre o evento.

    Visualização de um evento do gerenciador de pagamentos.

    Figura 6. Visualização de um evento do gerenciador de pagamentos.

Problema 980291 do Chromium

Lighthouse 5.2 no painel Audits

O painel Auditorias agora está executando o Lighthouse 5.2. Novo diagnóstico de uso de terceiros a auditoria informa a quantidade de código de terceiros que foi solicitada e por quanto tempo ele foi bloqueado. na linha de execução principal enquanto a página é carregada. Consulte Otimizar recursos de terceiros para saber mais. sobre como códigos de terceiros podem prejudicar o desempenho de carga.

Captura de tela do "Uso de terceiros" na interface de relatórios do Lighthouse.

Figura 7. A auditoria de uso de terceiros.

Problema 772558 do Chromium

Maior exibição de conteúdo no painel de desempenho

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

O marcador de LCP na seção "Tempos".

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.

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

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

  3. Clique no nó relacionado para selecioná-lo na Árvore DOM.

Registre 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 para melhorar o DevTools e quiser solicitar um novo recurso, acesse o Menu principal > Ajuda > Denunciar um problema no DevTools para criar um problema no rastreador da equipe de engenharia do DevTools. Fornecer um um exemplo mínimo e reproduzível no Glitch aumenta drasticamente a capacidade da equipe de corrigir o bug ou implementar a solicitação de recurso.

Ajuda > Relate um problema do DevTools." largura="800" height="604">

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

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   Mais > 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.