Novidades do DevTools (Chrome 78)

Kayce Basques
Kayce Basques
X GitHub Falha

Suporte a vários clientes no painel "Audits"

Agora é possível usar o painel Audits em combinação com outros recursos do DevTools, como Request Blocking e Local Overrides.

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

A pontuação inicial de performance é 70.

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

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

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

Agora que o painel Audits 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 a performance de carregamento. Para isso, bloqueie as solicitações dos scripts de bloqueio de renderização:

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

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

E, em seguida, auditando a página novamente:

A pontuação de desempenho melhorou para 97 depois que o bloqueio de solicitações foi ativado.

Figura 4. A pontuação de performance melhorou para 97 depois de bloquear os scripts problemáticos.

Você também pode usar as Substituições locais para adicionar atributos async a cada uma das tags do script, mas vamos deixar isso como um exercício para o leitor. Acesse a demonstração de vários clientes para testá-la. Ou confira este tweet para assistir uma demonstração em vídeo.

Problema do Chromium 991906

Depuração do gerenciador de pagamentos

A seção Background Services do painel Application agora oferece suporte a eventos do gerenciador de pagamentos.

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

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

    Gravação de eventos do gerenciador de pagamentos.

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

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

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

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

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

Problema do Chromium 980291

Lighthouse 5.2 no painel "Audits"

O painel Audits agora está executando 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 enquanto a página era carregada. Consulte Otimizar seus recursos de terceiros para saber mais sobre como o código de terceiros pode prejudicar a performance de carregamento.

Captura de tela da auditoria "Uso de terceiros" na interface do relatório do Lighthouse.

Figura 7. A auditoria de uso de terceiros.

Problema do Chromium 772558

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 Maior exibição de conteúdo (LCP, na sigla em inglês). A LCP informa o tempo de renderização do 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ó do 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.

    Seção "Nó relacionado" da guia "Resumo".

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

  3. Clique no Nó relacionado para selecioná-lo na árvore do DOM.

Enviar problemas do DevTools pelo menu principal

Se você encontrar um bug no DevTools e quiser registrar um problema ou 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 no Glitch aumenta drasticamente a capacidade da equipe de corrigir o bug ou implementar o recurso solicitado.

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

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

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.