Novidades do DevTools (Chrome 78)

Kayce Basques
Kayce Basques

Suporte a múltiplos clientes no painel de auditorias

Agora é possível 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 informe que a pontuação de desempenho da sua página é 70 e uma das suas maiores oportunidades de desempenho seja eliminar recursos de bloqueio de renderização.

A pontuação de desempenho inicial é 70.

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

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 Auditorias pode ser usado com o bloqueio de solicitações, é possível medir rapidamente quanto os scripts de bloqueio de renderização afetam o desempenho de carregamento. Para isso, primeiro bloqueie as solicitações dos scripts de bloqueio de renderização:

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

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

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

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

Figura 4. A pontuação de desempenho melhorou para 97 após o bloqueio dos scripts problemáticos.

Como alternativa, você pode usar Local Overrides para adicionar atributos async a cada tag de script, mas "deixaremos isso como um exercício para o leitor". Acesse a Demonstração de múltiplos clientes para fazer um teste. Ou confira este tweet para conferir 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 eventos do Gerenciador de pagamentos.

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

    Registro de eventos do Payment Handler.

    Figura 5. Registro de eventos do Payment Handler.

  4. Ative 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 do evento para saber mais sobre ele.

    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 Auditorias

O painel Auditorias já está executando o Lighthouse 5.2. A nova auditoria de diagnóstico de uso de terceiros informa quanto código de terceiros foi solicitado e por quanto tempo esse código bloqueou a linha de execução principal enquanto a página era carregada. Consulte Otimizar recursos de terceiros para saber mais sobre como códigos de terceiros podem prejudicar o desempenho de carregamento.

Captura de tela da auditoria de "Uso de terceiros" na interface de relatórios 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 Desempenho, a seção Tempos agora inclui um marcador para Maior exibição de conteúdo (LCP). A LCP informa o tempo de renderização do maior elemento de conteúdo visível na janela de visualização.

O marcador 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 Node relacionado na guia Resumo para destacar o nó na janela de visualização.

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

    Figura 9. A seção Related Node da guia Summary.

  3. Clique no Node relacionado para selecioná-lo na Árvore do DOM.

Registrar problemas do DevTools no menu principal

Se você encontrar um bug no DevTools e quiser registrar um problema ou tiver uma ideia de como melhorar o DevTools e 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 a solicitação de recurso.

Ajuda > Informar um problema no 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 seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.

Entrar em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.

  • Envie uma sugestão ou feedback em crbug.com.
  • Informe um problema do DevTools em Mais opções   Mais   > Ajuda > Informar problemas no DevTools.
  • Envie um tweet em @ChromeDevTools.
  • Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série O que há de novo no DevTools.

Chrome 123

Chrome 122

Chrome 121

Google Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Google Chrome 113

Chrome 112

Chrome 111

Google Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Introdução ao Chrome

Chrome 103

Introdução ao Chrome

Introdução ao Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

O Chrome 82 foi cancelado.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Google Chrome 67

Chrome 66

Chrome 65

Google Chrome 64

Google Chrome 63

Chrome 62

Chrome 61

Google Chrome 60

Chrome 59