Novidades do DevTools (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub Falha

Que bom que você voltou! Os novos recursos que chegam ao Chrome DevTools no Chrome 64 incluem:

Continue lendo ou assista a versão em vídeo dessas notas da versão abaixo.

Monitoramento de desempenho

Use o Monitor de desempenho para ter uma visualização em tempo real de vários aspectos do carregamento ou desempenho de execução de uma página, incluindo:

  • Uso da CPU.
  • Tamanho do heap do JavaScript.
  • O número total de nós do DOM, listeners de eventos JavaScript, documentos e frames na página.
  • Layouts e novos cálculos de estilo por segundo.

Se os usuários informarem que o app está lento ou instável, verifique o Monitor de desempenho para encontrar pistas.

Por que a performance de carregamento é importante: a BookMyShow teve um aumento de 80% nas conversões ao criar um app da Web progressivo focado na velocidade. Saiba mais.

Para usar o Monitor de desempenho:

  1. Abra o Command Menu.

  2. Comece a digitar Performance e selecione Show Performance Monitor.

    Monitor de desempenho Figura 1. O monitor de desempenho

  3. Clique em uma métrica para mostrar ou ocultar. Na Figura 1, os gráficos Uso da CPU, Tamanho da pilha do JS e Listeners de eventos do JS são mostrados.

Recursos relacionados:

  • Painel Performance. Siga uma jornada do usuário crítica e registre tudo o que acontece na página, incluindo atividade do JavaScript, solicitações de rede, uso da CPU e muito mais. Também pode ser usado para analisar o desempenho de carregamento. Saiba mais.
  • Painel Audits. Execute um conjunto de testes automatizados de carga e performance de execução em qualquer URL. Saiba mais.

Se você está começando a analisar o desempenho, o caminho recomendado é usar primeiro o painel Audits e depois investigar mais usando o painel Performance ou o monitor Performance.

Barra lateral do console

Em sites grandes, o console pode ficar rapidamente inundado com mensagens irrelevantes. Use a nova barra lateral do console para reduzir o ruído e se concentrar nas mensagens importantes.

Usar a barra lateral do console para mostrar apenas mensagens de erro

Figura 2. Usar a barra lateral do console para mostrar apenas mensagens de erro

A barra lateral do console fica oculta por padrão. Clique em Mostrar a barra lateral do console Mostrar a barra lateral do console para mostrar.

Recursos relacionados:

  • Caixa de texto Filtro. Digite um texto e o Console vai mostrar apenas as mensagens que incluem esse texto. Também oferece suporte a padrões de regex, filtros negativos e filtros de URL.

Agrupar mensagens semelhantes do Console

Agora, o console agrupa mensagens semelhantes por padrão. Por exemplo, na Figura 3, há 27 instâncias da mensagem [Violation] Avoid using document.write().

Exemplo de agrupamento de mensagens semelhantes no console

Figura 3. Exemplo de agrupamento de mensagens semelhantes no console

Clique em um grupo para expandi-lo e conferir cada instância da mensagem.

Exemplo de um grupo aberto de mensagens do Console

Figura 4. Exemplo de um grupo aberto de mensagens do Console

Desmarque a caixa de seleção Agrupar semelhantes para desativar esse recurso.

Recursos relacionados:

  • É possível agrupar suas próprias mensagens do Console com console.group().

Substituições locais

Ops! Originalmente, programamos o lançamento desse recurso no Chrome 64, mas o adiamos para perto do prazo final para resolver alguns problemas. Aparentemente, a página "O que há de novo" não foi atualizada a tempo. Desculpe.

Esse recurso está sendo enviado no Chrome 65, que será lançado aproximadamente seis semanas após o Chrome 64. Confira Substituições locais para saber mais. Se você estiver usando Windows ou Mac, pode testar o Chrome 65 agora mesmo fazendo o download do Chrome Canary.

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.