Novidades do DevTools (Chrome 64)

Kayce Basques
Kayce Basques
X GitHub

Que bom que você voltou! Os novos recursos que serão lançados no Chrome 64 incluem:

Leia ou assista a versão em vídeo destas notas da versão abaixo.

Monitoramento de desempenho

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

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

Se os usuários estiverem relatando que o app parece lento ou instável, verifique o Monitor de desempenho para pistas.

Por que o desempenho de carregamento é importante: o BookMyShow aumentou as conversões em 80% ao criar um app da Web progressivo focado na velocidade. Saiba mais.

Para usar o Monitor de desempenho:

  1. Abra o Command Menu (link em inglês).

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

    O Monitor de desempenho Figura 1. O Monitor de desempenho

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

Recursos relacionados:

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

Se você estiver começando a analisar a performance, o caminho recomendado é usar primeiro o painel Auditorias e depois investigar mais usando o painel Performance ou o monitor Performance.

Barra lateral do console

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

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 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 aceita padrões de regex, filtros negativos e filtros de URL.

Agrupar mensagens semelhantes do console

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

Exemplo de como o console agrupa mensagens semelhantes

Figura 3. Exemplo de como o console agrupa mensagens semelhantes

Clique em um grupo para abrir e ver 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:

  • Você pode 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 perto do prazo para corrigir algumas imperfeições. Aparentemente, a interface "O que há de novo" não foi atualizada a tempo. Desculpe.

Esse recurso será lançado no Chrome 65, aproximadamente seis semanas após o Chrome 64. Confira Substituições locais para saber mais. Se você usa Windows ou Mac, baixe o Chrome Canary para testar a versão 65.

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.

Novidades no DevTools

Uma lista de tudo o que foi abordado na série Novidades do DevTools.